Déclencher un élément de formulaire de sélection pour afficher ses options (drop ouvrir la liste déroulante des options) avec Javascript

Question

Voici le balisage

<select id="person_prefix" name="prefix"> 
<option value=""></option> 
<option value="Dr" selected="selected">Dr</option> 
<option value="Mr">Mr</option> 
<option value="Ms">Ms</option> 
<option value="Mrs">Mrs</option> 
</select> 

et je veux déclencher un événement javascript afin que la liste des options tombe vers le bas. En utilisant jquery j'ai essayé ce qui suit:

$("#person_prefix").click(); 
$("#person_prefix").mousedown(); 
$("#person_prefix").change(); 

mais rien ne semble fonctionner. Quel événement est-ce et comment peut-il être déclenché?

Merci

Answer 1

Vous ne pouvez pas effectuer ce programme de manière croisée par programme. Vous pouvez remplacer la liste déroulante avec une solution entièrement personnalisée pas réellement affichant un élément <select> ... mais vous ne pouvez pas le montrer par programme, en particulier dans IE.

Le le plus proche vous pouvez faire est déplacer l'utilisateur à l'élément via .focus():

$("#person_prefix").focus(); 

Ceci avec un peu de style CSS pour quand il est concentré (:focus) est généralement une assez bonne façon d'attirer l'attention sur il.

Answer 2

Si vous définissez l'attribut taille, la sélection affichera le nombre d'options spécifiées en taille.

var sel= document.getElementsByName('select_1')[0]; 
var len= '10'// or sel.options.length; 
// safest: var len=sel.getElementsByTagName('*').length; 
sel.setAttribute('size',len) 

Le fait de remettre la taille à '1' réduit la sélection.

Answer 3

Vous ne peut pas événement déclencheur de clic sur certains élément de forme, mais la solution de contournement appropriée est ce plugin:
jQuery.customSelect

Le grand avantage est qu'il lance le véritable élément select (vous avez réellement cliquez sur un invisible select - opacity: 0), ce qui est important sur les appareils mobiles (par exemple, l'iPhone a sa propre disposition pour afficher les options select's). Si vous ne voulez pas télécharger le plugin entier, vous pouvez alors préparer la solution par vous-même puisque vous savez comment déclencher le select (cachez-le en réglant opacity: 0 - il sera toujours cliquable).

Answer 4

construction sur @ réponse de Kennebec, une version jQuery pour obtenir un compte des options et optgroups:

var sel = $('select.mySelectClass'); 
var count=0; 

sel.find('option').each(function() { 

    count++; 
}); 

sel.find('optgroups').each(function() { 

    count++; 
}); 

sel.attr('size',count); 

Answer 5

je une fois chercher comment faire la même chose et n'a pas trouvé de solution de travail mais un gars de notre groupe javascript est venu avec un travail intelligent. Voici le code.

HTML

<input type="button" id="show" value="show" /> 
<select id="myslect"> 
    <option>nothing</option> 
    <option>something</option> 
    <option>anything</option> 
</select> 

Javascript

$("#show").click(function() { 
    var element = $("select")[0], 
     worked = false; 
    if(document.createEvent) { // chrome and safari 
     var e = document.createEvent("MouseEvents"); 
     e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     worked = element.dispatchEvent(e); 
    } 
    if(!worked) { // unknown browser/error 
     alert("It didn't worked in your browser."); 
    } 
}); 

Je ne suis pas sûr de savoir comment relier au poste de groupe de sorte que vous pouvez voir tout le fil. Quoi qu'il en soit, les crédits à CJ Madolara. Bon travail!

Mise à jour:fonctionne uniquement sur Chrome et Safari