Combo box в HTML 5 и эквиваленте HTML 4

HTML 5 среди новых объектов форм включает комбобокс, позволяющий заполнять текстовое поле в соответствии с параметрами, представленными в выпадающем списке.

Эквивалент в HTML 4 можно реализовать с помощью двух функций JavaScript.

Комбобокс в HTML 5

Синтаксис:

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

Для создания комбобокса даталист ассоциируется с общим или специализированным текстовым полем.

Атрибуты, описывающие комбобокс, являются соответствующими атрибутами <input> и <datalist>.

Эквивалент в HTML 4

Собрав текстовое поле и раскрывающийся список HTML 4, можно создать объект-эквивалент, но с добавленным кодом JavaScript.

Функция JavaScript onChange позволяет определить выбор пользователем параметра.
Затем необходимо перенести выбранное значение в текстовое поле.

HTML-код:

<input type="text" id="theinput" name="theinput" />
<select name="thelist" onChange="combo(this, 'theinput')">
  <option>un</option>
  <option>deux</option>
  <option>trois</option>
</select> 

Чтение списка в JavaScript:

var idx = thelist.selectedIndex;
var content = thelist.options[idx].innerHTML;

Если бы мы присвоили значения опциям, инструкция была бы скорее:

var content = thelist.options[idx].value;  

Присвойте значение текстовому полю, так как идентификатор текстового поля был указан при вызове функции combo.

theinput = document.getElementById(theinput);  
theinput.value = content;

Полная функция JavaScript:

function combo(thelist, theinput)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  theinput.value = content;	
}

Этот код является достаточным для передачи выбора параметра в текстовом поле, но имеет пробел. Функция onChange работает только в том случае, если выбранный параметр отличается от отображаемого параметра, то есть если пользователь хочет выбрать первый параметр в списке (или параметр по умолчанию), он становится нерабочим, поскольку пользователь ничего не меняет.
В этом случае невозможно вернуть значение и передать его.

Для этого добавляется вторая функция comboInit.

Она связана с событием onMouseOut. Когда пользователь отображает список, первая опция переносится в текстовое поле. Затем он может выбрать другой вариант, если захочет.

Это работает только тогда, когда текстовое поле пусто, и только onChange станет эффективным.

HTML-код:

<select name="thelist" 
   onChange="combo(this, 'theinput')" 
   onMouseOut="comboInit(this, 'theinput')" > 

Вторая функция:

function comboInit(thelist)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  if(theinput.value == "")
    theinput.value = content;	
}

Для полной демонстрации

Графическая коробка Combo

один два три

HTML-код

Инкорпорируем в форму текстовое поле и раскрывающийся список:

<input type="text" id="theinput" name="theinput" />
<select name="thelist" onChange="combo(this, 'theinput')" onMouseOut="comboInit(this, 'theinput')" >
  <option>un</option>
  <option>deux</option>
  <option>trois</option>
</select>

Код JavaScript

Первая функция comboInit действует вначале, когда текстовое поле пусто. Она присваивает значение по умолчанию или первую строку списка.
Вторая функция combo действует, когда пользователь выбирает строку из выпадающего списка.

function comboInit(thelist)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  if(theinput.value == "")
    theinput.value = content;	
}

function combo(thelist, theinput)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  theinput.value = content;	
}

Код может быть скопирован выше для ваших приложений или воспроизведен в исходнике этой страницы (все, что находится в полевом наборе). Имена thelist, обозначающие раскрывающийся список, и theinput, обозначающий текстовое поле, могут быть изменены .