8
votes

Comment développer automatiquement l'élément Select HTML dans JavaScript

J'ai un objet HTML (caché) HTML SELECT dans mon menu connecté à un lien Bouton Menu, de sorte que cliquer sur le lien affiche la liste afin que vous puissiez choisir à partir de celui-ci.

Lorsque vous cliquez sur le bouton, il appelle un peu de javascript Pour montrer le masque la liste. Ce que je veux vraiment, c'est de rendre le avec plusieurs options visibles à la fois en définissant la taille attribut , le code est hébergé sur le site Web de Google Code, WeltSelect.js est de seulement 4 Ko, voir Captures d'écran et la téléchargez ici:

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

Captures d'écran

Il y a une petite différence dans l'interface graphique lors de l'émulation de clic, mais cela ne compte pas vraiment, le voir pour vous-même:

lorsque la souris clique sur:

 Mouseclicking
(source: Googlecode.com )

lors de l'émulation de clic:

 EmilitClicking
(Source: GoogleCode.com )

Plus d'écran d'écran sur le site Web du projet, lien ci-dessus.


0 commentaires

-2
votes

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()
}


3 commentaires

Je suis bloqué votre code dans un JSFIDDLE et cela ne fonctionne pas. La case Select reçoit la mise au point, mais elle ne se développe pas. (Chrome sur Win7.)


@Roddyofthefrozenpeas Juste j'ai vu votre Jsfiddle. S'il vous plaît appliquer Select Box est affiché: Aucun; propriété CSS. et dans l'utilisation de script $ ('# liste') au lieu de $ ('liste') et dans jsfiddle gauche le gauche, choisissez JQuery 1.8.2


Votre code dans votre réponse indique "Utilisation de prototypes non jQuery". En outre, cela ne fonctionne toujours pas. Fiddle mis à jour . Bien que cela montre le SELECT, il ne l'étend pas. (Chrome, Win7.)



-1
votes

Voici une solution simple, Menu de sélection automatique développé (toutes les options visibles) xxx


0 commentaires

-3
votes

Le moyen le plus simple consiste à utiliser l'attribut "multiple" dans HTML

et vous pouvez également ajouter un attribut de style à Définissez la hauteur de la liste xxx


0 commentaires