Comment pouvez-vous dire par programmation à un SELECT HTML de dérouler (par exemple, en raison d'un survol de la souris)?

Comment pouvez-vous dire par programmation à un code HTML selectde se dérouler (par exemple, en raison d'un survol de la souris)?

Vous ne pouvez pas faire cela avec une balise de sélection HTML, mais vous pouvez le faire avec JavaScript et HTML. Il existe une variété de contrôles existants qui font cela - par exemple, la liste "suggérer" attachée à l'entrée SO "balise intéressante / ignorée", ou la recherche des adresses e-mail par Gmail.

Il existe de nombreux contrôles JavaScript + HTML qui offrent cette fonctionnalité - recherchez des contrôles de saisie semi-automatique pour des idées.

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

Cela était en fait possible avec HTML + Javascript, bien que partout ailleurs les gens disent que ce n'est pas le cas, mais cela a été obsolète plus tard et ne fonctionne plus maintenant.

Cependant, cela ne fonctionnait que dans Chrome. En savoir plus si vous êtes intéressé.

Selon le projet de travail du W3C pour HTML5, section 3.2.5.1.7. Contenu interactif :

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

Lorsque l'utilisateur déclenche un élément avec un comportement d'activation défini d'une manière autre que de cliquer dessus, l'action par défaut de l'événement d'interaction doit être d'exécuter des étapes d'activation de clic synthétique sur l'élément.

<select>étant un contenu interactif, je pensais qu'il était possible d'afficher ses <option>s. Après quelques heures à jouer, j'ai découvert que l'utilisation document.createEvent()et le .dispatchEvent()fonctionnement.

Cela dit, l'heure de la démonstration. Voici un violon qui fonctionne.

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 de même mais pas dans Chrome, n'hésitez pas à modifier ce violon .

La réponse de Xavier Ho couvre comment résoudre le problème dans la plupart des navigateurs actuellement disponibles. Mais, il est une bonne pratique « de ne pas l' envoi / modifier » par les événements JavaScript plus . (Comme, mousedowndans ce cas)

À partir de la version 53+, Google Chrome n'effectuera pas d'action par défaut pour les événements non fiables . Tels que les événements créés ou modifiés par script, ou distribués via une dispatchEventméthode. Ce changement concerne l'alignement sur Firefox et IE qui, je pense, n'effectuent déjà pas l'action.

À des fins de test, Fiddle fourni que la réponse de Xavier ne fonctionnera pas dans Chrome 53+. (Je ne le teste pas FF et IE).

Liens pour référence:

https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

Et initMouseEvent est également obsolète

C'est le plus proche que je puisse obtenir, changer la taille de l'élément sur la souris et restaurer la taille sur la souris:

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

J'ai ce même problème et le moyen le plus simple que j'ai trouvé pour résoudre c'était avec html et css.

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

Je pense que ce n'est plus possible dans Chrome.

Il semble que la version 53 de chrome désactive cette fonctionnalité comme indiqué par Asim K T.

Selon la spécification http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

Les événements approuvés ne doivent pas déclencher l'action par défaut (sauf l'événement de clic).

Ils l'ont cependant activé dans la vue Web, mais je ne l'ai pas testé.

Nous avons constaté que certaines vues Web utilisent fastclick à l'intérieur et, en raison d'un risque de rupture, nous allons autoriser la désactivation de la souris sur les sélections même si elles ne sont pas fiables.

Et dans cette discussion, l'idée de laisser les développeurs ouvrir une liste déroulante par programme est abandonnée.

Si quelqu'un cherche toujours ceci:

<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" >Show dropdown items</button>

Javascript:

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

Mettre à jour:

Un jusqu'à ce qu'il n'y ait pas de solution parfaite à ce problème, mais vous pouvez essayer d'éviter ce scénario. Pourquoi veux-tu faire cela. Je me demandais une solution il y a quelques mois pour créer un plugin de sélection pour les appareils mobiles

https://github.com/HemantNegi/jquery.sumoselect

Enfin, nous avons masqué le div personnalisé (ou tout autre élément) avec un élément de sélection transparent, afin qu'il puisse interagir directement avec l'utilisateur.

Voici le meilleur moyen que j'ai trouvé. REMARQUE Cela ne fonctionne qu'avec IE sous Windows et votre site Web devrait probablement se trouver dans une zone sécurisée - car nous accédons au shell. L'astuce est que ALT-Flèche bas est une touche de raccourci pour ouvrir une liste déroulante de sélection.

<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>

Arrêtez de penser qu'une chose est impossible, rien n'est impossible à faire, quand vous le souhaitez.

Utilisez cette fonction d'extension JS créée par un gars.

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

Incluez ce JS et appelez-le simplement en passant le paramètre comme identifiant de sélection, comme ça:

ExpandSelect(MySelect)

Je me trompe peut-être, mais je ne pense pas que ce soit possible avec la boîte de sélection par défaut. Vous pouvez faire quelque chose avec JS et CSS qui atteint le résultat souhaité, mais pas (à ma connaissance) le SELECT vanilla.

L'ouverture d'une "sélection HTML" est possible grâce à certaines solutions de contournement mentionnées dans cette question et d'autres similaires. Cependant, une manière plus propre de faire ceci est d'ajouter une bibliothèque de sélection à votre projet comme "select2" ou "choisi". Par exemple, ouvrir un select2 par programme serait aussi simple que:

$('#target-select').select2('open');

Ce n'est pas exactement ce que vous avez demandé, mais j'aime cette solution pour sa simplicité. Dans la plupart des cas où je souhaite lancer une liste déroulante, c'est parce que je valide que l'utilisateur a effectivement fait une sélection. Je change la taille de la liste déroulante et la concentre, ce qui met bien en évidence ce qu'ils ont sauté:

$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();