HTML下拉列表最佳实践

Question

我组建了一个相当简单的HTML/JavaScript的/ PHP的形式（我是相当新的所有这些）。表单的一个字段要求用户从合理长的列表中选择一个选项（使用下拉列表）。名单的内容极不可能改变。是否有一个“更好”的方式来填充比单纯使用了很多<option>标记列表：

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

Answer 1

产生的HTML总是要有选择的标签，但你可以生成它在飞行使用PHP或jQuery。

例如

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

如果您不需要在词形，例如数1 vs. 'one'，你可以节省自己为循环创建大量单词的麻烦。

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

Answer 3

从可用性的角度来看，如果选项的数量真的很长，很难找到您实际需要的选项。

试图找到一种方式来分割的选项分成类别，或许显示两个下拉菜单：第一个选择的类别，而第二只显示类别中的选项。您可以使用jQuery根据第一个选择中的选择动态创建第二个下拉列表的<option>。

E.g

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

随着HTML：

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