HTML Liste déroulante Meilleures pratiques

Question

Je suis en train de mettre en place un formulaire HTML/Javascript/PHP assez simple (je suis assez nouveau pour tout cela). Un champ du formulaire nécessite que les utilisateurs sélectionnent une option dans une liste raisonnablement longue (en utilisant une liste déroulante). Le contenu de la liste est extrêmement peu susceptible de changer. Y at-il une « meilleure » façon de remplir la liste que d'utiliser simplement beaucoup de <option> tags:

<select name="longlist"> 
    <option value="one">One</option> 
    <option value="two">Two</option> 
    .... 
    <option value="sixty">Sixty</option> 
</select> 

Answer 1

Le résultat HTML sera toujours d'avoir les balises d'options, mais vous pouvez être en mesure de générer à la volée en utilisant PHP ou jQuery.

Par exemple

PHP

<select> 
<?php 
$myArray=array("One","Two","Three", "Four", "Five"); 
while (list($key, $val) = each($myArray)) 
    { 
    echo "<option>" . $val . "</option>" 
    } 
?> 
</select> 

jQuery

<select id="array-test"></select> 

var myArray= ["One","Two","Three","Four","Five"]; 

$.each(myArray, function(index, value) { 
    $("#array-test").append("<option>" + value + "</option"); 
}); 

Answer 2

Si vous n'avez pas besoin d'avoir le numéro sous forme de texte, par exemple 1 vs. 'one', vous pouvez vous épargner la peine de devoir créer le grand tableau de mots pour la boucle.

<select> 
<?php 
    for ($i = 1; $i <= 60; $i++){ 
     echo "<option>" . $i . "</option>"; 
    } 
?> 
</select> 

Answer 3

D'un point de vue de la facilité d'utilisation, si le nombre d'options est vraiment long, il est difficile de trouver l'option que vous voulez réellement. Essayez de trouver un moyen de diviser les options en catégories et peut-être afficher deux listes déroulantes: la première pour choisir la catégorie, et la seconde pour afficher uniquement les options dans la catégorie. Vous pouvez utiliser jQuery pour créer dynamiquement les <option> pour la deuxième liste déroulante en fonction du choix effectué dans le premier.

par exemple

options = { 
    "one": [1, 2, 3, 4], 
    "two": [11, 12, 13, 14], 
    "three": [21, 22, 23, 24] 
} 

$("select.select1").change(function() { 
    var category = $(this).val() || $(this).text(); 
    if (options[category]) { 
     $("select.select2").empty(); 
     for (var i in options[category]) { 
     var newOption = $("<option>").text(options[category][i]); 
     $("select.select2").append(newOption); 
     } 
    } else { 
     $("select.select2").html("<option>Select a category first</option>"); 
    } 
}); 

$("select.select1").change(); 

Avec HTML:

<select class="select1"> 
    <option>one</option> 
    <option>two</option> 
    <option>three</option> 
</select> 
<select class="select2"> 
    <!-- I am dynamically generated --> 
</select>