Vous pouvez utiliser le javascript sélectionner

objet dans un moyen puissant pour vos besoins de programmation HTML5 et CSS3. Pour rendre le travail de sélection multiple, vous avez à faire quelques changements à la fois le HTML et le code javascript. Consultez cette page avec une zone de liste à sélection multiple.

Comment coder un objet de sélection de sélection multiple

Vous modifiez le sélectionner Code de deux façons de faire des sélections multiples:

• Indiquez sélections multiples sont autorisées. Par défaut, sélectionner boîtes ont une seule valeur. Vous aurez besoin de mettre un interrupteur pour indiquer au navigateur pour permettre à plus d'un élément à sélectionner.

• Faire le mode de sélection d'un multiligne. Le comportement déroulant norme n'a pas de sens quand vous voulez sélections multiples parce que l'utilisateur a besoin de voir toutes les options à la fois. La plupart des navigateurs passent automatiquement dans un mode multiligne, mais vous devez contrôler le processus directement.

Sélections multiples

Le code est pas choquant, mais il a certaines caractéristiques importantes:

• Appeler le sélectionner objet selLanguage. Comme d'habitude, les éléments de formulaire ont besoin d'une id attribuez de sorte que vous pouvez le lire dans le code javascript.

• Ajouter le multiple attribuer à votre objet. Cet attribut indique au navigateur d'accepter des entrées multiples en utilisant Maj + clic (sélections contiguës) ou Ctrl + clic (pour la sélection plus précis).

• Met le taille à 10. La taille indique le nombre de lignes à afficher.

• Faire un bouton. Avec la sélection multiple, vous ne voudrez probablement pas pour déclencher l'action jusqu'à ce que l'utilisateur a fini de faire des sélections. Un bouton séparé est la meilleure façon de vous assurer que le code est déclenché lorsque vous voulez que cela se produise.

• Créer un sortie div. Ce code détient la réponse.

Comment écrire le code javascript

Le code javascript pour lire une zone de liste à sélection multiple est un peu différent que le code de sélection standard. La valeur propriété renvoie généralement une valeur, mais une zone de liste à sélection multiple revient souvent plus d'un résultat.

La clé est de reconnaître que la liste des option objets à l'intérieur d'un sélectionner objet est vraiment une sorte de tableau, pas une seule valeur. Vous pouvez regarder de plus près la liste des objets à voir ceux qui sont sélectionnés, ce qui est essentiellement ce que le (showChoices) fonction fait:

Dans un premier temps, le code semble intimidant, mais si vous le décomposer, il est pas trop difficile.

1. Créer une variable pour représenter l'ensemble sélectionner objet.

   Le standard getElementById () technique fonctionne très bien.

    var selLanguage = document.getElementById ("selLanguage") -

2. Créez une variable de chaîne pour contenir la sortie.

   Lorsque vous construisez sortie HTML complexe, en travaillant avec une variable de chaîne est beaucoup plus facile que d'écrire directement le code à l'élément.

    var result = "
   Votre Languageslt; / h2> "-

3. Construire une liste non ordonnée pour afficher les résultats.

   Une liste non ordonnée est une bonne façon de cracher les résultats.

    + = résultat "
    n "-

4. Franchissez selLanguage comme si elle était un tableau.

   Utiliser un pour boucle d'examiner la ligne de zone de liste en ligne. Noter que selLanguage a un longueur la propriété comme un tableau.

    for (i = 0 à i lt; selLanguage.length- i ++) {

5. Attribuez l'élément courant à une variable temporaire.

   La CurrentOption variable contient une référence à chaque option élément de l'objet original que la boucle progresse.

    CurrentOption = selLanguage [i] -

6. Vérifiez pour voir si l'élément courant a été sélectionné.

   L'object CurrentOption a un sélectionné propriété qui vous indique si l'objet a été mis en évidence par l'utilisateur. sélectionné est une propriété booléenne, il est vrai ou faux.

    si (currentOption.selected == true) {

7. Si l'élément a été sélectionné, ajouter une entrée dans la liste de sortie.

   Si l'utilisateur a mis en évidence cet objet, créer une entrée dans la liste non ordonnée logé dans le résultat variable.

    + = résultat "

8. "+ CurrentOption.value +" lt; / li> n ";

9. Fermez la liste.

   Après la boucle a terminé à vélo à travers tous les objets, vous pouvez fermer la liste non ordonnée que vous avez été la construction.

    résultat = + "lt; / ul> n" -

10. Imprimer les résultats à la div.

    La sortie div innerHTML la propriété est un endroit parfait pour imprimer la liste non ordonnée.

     output = document.getElementById ("output") - output.innerHTML = result-

Quelque chose d'étrange se passe ici. Les options d'une boîte de sélection agissent comme un tableau. Une liste non ordonnée est un peu comme un tableau. Bingo! Ils sont tableaux, juste sous différentes formes. Vous pouvez penser de toute donnée figurant dans un tableau. Parfois, vous organisez les données comme une liste (pour l'affichage), parfois comme un tableau (pour le stockage dans la mémoire), et il est parfois un groupe restreint (pour la saisie de l'utilisateur).