Combo box in HTML 5 and HTML 4 equivalent

HTML 5 among the new form objects includes a combobox that allows you to fill the text field in accordance with the parameters presented in the drop-down list .

The HTML 4 equivalent can be implemented using two JavaScript functions.

Combobox in HTML 5

Syntax:

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

To create a combo box, a datalist is associated with a general or specialized text field.

Attributes that describe the combobox are the corresponding <input> and <datalist> attributes.

HTML 4

equivalent

By assembling the HTML 4 text field and drop-down list, you can create an equivalent object, but with added JavaScript code.

The JavaScript onChange function allows you to define the user's choice of parameter.
You then transfer the selected value to a text field.

HTML code:

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

Reading list in JavaScript:

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

If we assigned values to the options, the instruction would be rather:

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

Assign a value to the text field because the text field ID was specified when the combo function was called.

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

Full JavaScript function:

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

This code is sufficient to pass the parameter selection in the text field, but has a space. The onChange function works only if the selected parameter differs from the displayed parameter, that is, if the user wants to select the first parameter in the list (or the default parameter), it becomes inoperative because the user does not change anything.
In this case, you cannot return a value and pass it.

To do this, a second comboInit function is added.

It is associated with the onMouseOut event. When the user displays the list, the first option is transferred to the text field. He can then choose another option if he wants.

This only works when the text field is empty and only onChange becomes effective.

HTML code:

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

Second function:

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

For a complete demonstration

Combo Graphics Box

an two rub

HTML-code

We incorporate a text field and a drop-down list into the form:

<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 code

The first comboInit function works first when the text field is empty. It assigns a default value or the first line of the list.
The second combo function works when the user selects a row from the drop-down list.

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;	
}

The code can be copied above for your applications or reproduced in the source of this page (anything in the field set). The names thelist, which denotes a drop-down list, and theinput, which denotes a text field, can be changed.