Comment pouvez-vous dire par programme HTML SÉLECTIONNER pour déplacer vers le bas (par exemple, en raison du passage de la souris)?

Question

Comment pouvez-vous dire par programme HTML select à la baisse vers le bas (par exemple, en raison du passage de la souris)?

Answer 1

Ceci est possible avec HTML+Javascript, malgré partout ailleurs les gens disent qu'il ne l'est pas.

Toutefois, cela ne fonctionne que sur Chrome. Lire plus si vous êtes interessé.

---

Selon le W3C Working Draft pour HTML5, Section 3.2.5.1.7. Contenu Interactif:

Certains éléments HTML ont une activation du comportement, ce qui signifie que l'utilisateur peut activer. Cela déclenche une séquence d'événements dépendant de l'activation du mécanisme [...] par exemple en utilisant le clavier ou la voix, ou par l'intermédiaire de clics de souris.

Lorsque l'utilisateur déclenche un élément avec une activation du comportement d'une manière autre que de la souris, l'action par défaut de l'interaction de l'événement doit être à exécuter synthétique cliquez étapes d'activation sur l'élément.

<select> être un Contenu Interactif, je pense qu'il est possible par programmation à l'écran de son <option>s. Après quelques heures de jeu environ, j'ai découvert que l'utilisation de document.createEvent() et .dispatchEvent() travaux.

Cela dit, la démo de temps. Ici, c'est un travail de Violon.

---

HTML:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​

Javascript:

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

Si quelqu'un trouve un moyen de faire la même chose mais pas dans Chrome, n'hésitez pas à modifier ce violon.

Answer 2

C'est le plus proche que j'ai pu obtenir, modifier la taille de l'élément onmouseover, et restaurer la taille onmouseout:

   <select onMouseOut="this.size=1;" onMouseOver="this.size=5;">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>

Answer 3

Vous ne pouvez pas faire cela avec un HTML balise select, mais vous pouvez le faire avec JavaScript et HTML. Il existe une variété de contrôles mis en place pour le faire - par exemple, le "suggèrent" liste jointe en annexe à la "intéressant/ignorés tag" entrée, ou Gmail de recherche pour les adresses email.

Il y a beaucoup de JavaScript+HTML contrôles qui offrent cette fonctionnalité, regardez pour les contrôles de saisie semi-automatique pour des idées.

Voir ce lien pour la saisie semi-automatique de contrôle de la...http://ajaxcontroltoolkit.codeplex.com/

Answer 4

Voici la meilleure façon que j'ai trouvée. REMARQUE Il ne fonctionne qu'avec IE sur Windows et votre site web devrait probablement être dans une zone sécurisée - parce que nous avons accès à la coquille. Le truc, c'est que ALT-Flèche vers le Bas est une touche de raccourci pour ouvrir une sélectionnez déplacer vers le bas.

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>

Answer 5

Arrêter de penser qu'une chose est impossible, rien n'est impossible à faire lorsque vous voulez faire.

Utilisez cette développez JS fonction créée par un mec.

http://code.google.com/p/expandselect/

Inclure ce JS et appelez simplement que passer le param votre select id, comme ça:

ExpandSelect(MySelect)