HTML-выпадающий список Best Practices

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

С точки зрения удобства использования, если количество вариантов действительно такое большое, трудно найти нужный вариант.

Попробуйте найти способ разбить параметры на категории и, возможно, отобразить два раскрывающихся списка: первый - для выбора категории, а второй - для отображения только параметров внутри категории. Вы можете использовать jQuery для динамического создания <option> s для второго выпадающего списка на основе выбора, сделанного в первом.

* 1006 например *

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>

Answer 3

Если вам не нужно иметь номер в форме слова, например, 1 vs. 'one', вы можете избавить себя от необходимости создавать большой массив слов для цикла.

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