[英]HTML Drop Down List Best Practices
我正在整理一個相當簡單的HTML / Javascript / PHP表單(我對所有這些都相當新)。 表單的一個字段要求用戶從合理長的列表中選擇一個選項(使用下拉列表)。 列表的內容極不可能改變。 填充列表是否有“更好”的方式,而不僅僅是使用大量的<option>
標記:
<select name="longlist">
<option value="one">One</option>
<option value="two">Two</option>
....
<option value="sixty">Sixty</option>
</select>
生成的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");
});
從可用性的角度來看,如果選項的數量確實很長,則很難找到您真正想要的選項。
嘗試找到一種方法將選項拆分為類別,並可能顯示兩個下拉菜單:第一個選擇類別,第二個只顯示類別中的選項。 您可以使用jQuery根據第一個<option>
為第二個下拉列表動態創建<option>
。
例如
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>
如果您不需要使用單詞形式的數字,例如1 vs. 'one'
,您可以省去必須為循環創建大量單詞的麻煩。
<select>
<?php
for ($i = 1; $i <= 60; $i++){
echo "<option>" . $i . "</option>";
}
?>
</select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.