Comment faire pour élargir automatiquement l'élément select html en javascript

J'ai un objet (caché) html select dans mon menu attaché à un lien de bouton de menu, de sorte que, en cliquant sur le lien, vous voyez la liste afin de pouvoir en choisir.

Lorsque vous cliquez sur le bouton, il appelle un javascript pour afficher <select> . En cliquant à partir de <select> masque la liste. Ce que je veux vraiment, c'est que le <select> apparaisse pleinement étendu, comme si vous aviez cliqué sur la flèche "vers le bas", mais je ne peux pas fonctionner. J'ai essayé beaucoup d'approches différentes, mais je ne peux pas avancer. Ce que je fais actuellement, c'est ceci:

 <li> <a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a> <select id="list" style="display:none; onblur="javascript:cancellist()"> </select> </li> // in code function showlist() { //using prototype not jQuery $('list').show(); // shows the select list $('list').focus(); // sets focus so that when you click away it calles onblur() }

J'ai essayé d'appeler $('list').click() .
J'ai essayé de définir onfocus="this.click()" Mais dans les deux cas, je reçois

Uncaught TypeError: Object # n'a pas de méthode 'click'

Ce qui est particulier car le texte du lien indique qu'il prend en charge les fonctions standard.

J'ai essayé de définir la .size = .length qui fonctionne, mais n'a pas la même apparence (comme lorsque vous cliquez pour ouvrir l'élément, il flotte sur le reste de la page.)

Est-ce que quelqu'un a des suggestions?

J'ai rencontré le même problème, je voulais implémenter la navigation sur le clavier dans mon application, mais les éléments sélectionnés n'ont pas été étendus, de sorte que les personnes qui utilisaient le clavier devaient perdre des fonctionnalités. J'ai créé une fonction ExpandSelect () qui émule les clics de la souris sur les éléments sélectionnés, il crée une autre <select> avec plusieurs options visibles à la fois en définissant l'attribut size , le code est hébergé sur le site Google Code, ExpandSelect.js est Seulement 4 Ko, voir les captures d'écran et télécharger ici:

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

Captures d'écran

Il existe une petite différence dans l'interface graphique lors de l'émulation du clic, mais cela n'a pas d'importance, voyez-le par vous-même:

Lorsque vous cliquez avec la souris:

MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

Lorsque vous émulez le clic:

EmulatingClicking http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

Plus de screenshots sur le site Web du projet, lien ci-dessus.

Vous avez une erreur de syntaxe. CA devrait etre:

 $('#list').click();

Vous avez oublié le #

Essayez ceci:

 function showlist() { //using prototype not jQuery $('#list').show(); // shows the select list $('#list').focus(); // sets focus so that when you click away it calles onblur() }

Voici une solution simple, menu de sélection AUTO-EXPANDÉ (toutes les options sont visibles)

 <select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;"> <option selected="selected" value="0">defaulttt</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> </select> <script type="text/javascript"> var slctt=document.getElementById("ddlTestSelect"); slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width='470px'; </script>

La manière la plus simple est d'utiliser l'attribut "multiple" en HTML

<select multiple></select>

Et vous pouvez également ajouter un attribut de style pour définir la hauteur de la liste

 <select multiple style="height:150px;"></select>