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>