HTML 下拉列表最佳实践答案

【问题标题】：HTML Drop Down List Best PracticesHTML 下拉列表最佳实践
【发布时间】：2010-08-08 21:49:57
【问题描述】：

我正在整理一个相当简单的 HTML/Javascript/PHP 表单（我对所有这些都很陌生）。表单的一个字段要求用户从相当长的列表中选择一个选项（使用下拉列表）。列表的内容极不可能永远改变。有没有比简单地使用大量 <option> 标签“更好”的方式来填充列表：

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

【问题讨论】：

标签： php javascript html forms drop-down-menu

【解决方案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");
});

【讨论】：

【解决方案2】：

从可用性的角度来看，如果选项的数量真的那么长，那么很难找到你真正想要的选项。

尝试找到一种方法将选项分成类别，并可能显示两个下拉列表：第一个选择类别，第二个仅显示类别中的选项。您可以使用 jQuery 为第二个下拉菜单动态创建 <option>s。

例如

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>

【讨论】：

编码很好。但是，我们应该始终记住 required（界面和元素）部分，而不是修改 providing（界面和元素的编码方式）部分。跨度>
@Knowledge Craving- 我不确定我是否理解你，但我不建议更改界面以允许动态生成选项，但应该更改它以提高可用性。代码本身是不太重要的部分，帮助网站的最终用户更快地缩小到他/她想要的范围更为重要。

【解决方案3】：

如果您不需要单词形式的数字，例如1 vs. 'one'，您可以省去为循环创建大量单词的麻烦。

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

【讨论】：