Comment développer automatiquement html sélectionner l'élément en javascript

J'ai un (caché) html sélectionner un objet dans mon menu attaché à un menu bouton de lien, de sorte qu'en cliquant sur le lien affiche la liste de sorte que vous pouvez choisir à partir.

Lorsque vous cliquez sur le bouton, il demande un peu de javascript pour afficher le <select>. En cliquant à l'extérieur de la <select> masque la liste. Ce que je veux vraiment, c'est faire le <select> apparaissent entièrement développé, comme si vous aviez cliqué sur la flèche "bas", mais je ne peux pas obtenir ce travail. J'ai essayé beaucoup de différentes approches, mais ne peut pas le faire avancer. Ce que je fais actuellement est: est-ce

<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 réglage onfocus="this.click()"
    Mais dans les deux cas je suis

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

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

J'ai essayé de réglage de la .size = .length qui fonctionne, mais qui n'ont pas la même apparence (comme lorsque vous cliquez sur pour ouvrir l'élément, il flotte au-dessus du reste de la page.)

Quelqu'un aurait-il des suggestions?

double possible de Ouvert, Sélectionnez à l'aide de Javascript/jQuery?
double possible de Comment pouvez-vous dire par programme HTML SÉLECTIONNER pour déplacer vers le bas (par exemple, en raison du passage de la souris)
Des problèmes similaires - merci pour eux, ils semblent plus être à la recherche pour les options de taille de la commande (largeur ainsi que la hauteur), alors que tout ce que je veux faire est de faire apparaître "ouvert".
le double souligné par la CMS exactement les réponses à ceci: vous ne pouvez pas. Vous avez besoin de custom HTML/JS.

OriginalL'auteur xan | 2010-05-27

  1. 2

    J'ai rencontré le même problème, a voulu mettre en œuvre la navigation au clavier dans mon application, mais de sélectionner des éléments n'ont pas été élargi, afin que les gens à l'aide du clavier vont perdre des fonctionnalités. J'ai créé ExpandSelect() fonction qui émule les clics de souris sur certains éléments, il le fait en créant un autre <select> avec de multiples options visible à la fois par la définition de la size attribut, le code est hébergé sur Google Code site, ExpandSelect.js est à seulement 4 KO, voir les captures d'écran et de le télécharger ici:

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

    Captures d'écran

    Il y a un peu de différence dans l'interface utilisateur lorsque l'émulation de la souris, mais il n'est pas vraiment important, voir par vous-même:

    Lorsque la souris en cliquant sur:

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

    Lorsque l'émulation cliquez sur:

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

    Plus de captures d'écran sur le site web du projet en lien ci-dessus.

    OriginalL'auteur Czarek Tomczak

  2. 0

    Ici une solution simple, AUTO-EXPANSION, sélectionnez menu (toutes les options 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>

    OriginalL'auteur T.Todua

  3. -1

    Vous avez une erreur de syntaxe. Il doit être:

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

    Vous avez oublié le #

    Vrai, mais click ne développeront pas la select élément.
    Pas à l'état de Prototype, je crois...

    OriginalL'auteur Anthony

  4. -1

    Veuillez essayer 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()
}
    J'ai collé votre code dans un JSFiddle et il ne fonctionne pas. La boîte de sélection reçoit le focus, mais il ne se développe pas. (Chrome sur Win7.)
    juste j'ai vu votre JSFiddle. veuillez appliquer la boîte de sélection est display:none; propriété css. et en utiliser un script, $('#liste') au lieu de $('liste') et dans JSFiddle côté gauche, choisissez jquery 1.8.2
    Votre code dans votre réponse dit "à l'aide de prototype, jQuery." Aussi il ne fonctionne toujours pas. mise à Jour de violon. Tout cela montre bien le choisir, il ne se développe pas. (Chrome, Win7.)

    OriginalL'auteur suresh.g

  5. -2

    La façon la plus simple est d'utiliser le "multiple" de l'attribut HTML

    <select multiple></select>

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

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

    OriginalL'auteur Thomas Fonseca