The form object select and how data are sent

To create lists and menus in HTML, the select and option tags are used. But how to send the option chosen by the user with other form data?

Here the syntax of the select tag: 

<form method="GET" action="page.html">
  <select name="">
    <option value="" selected></option>
    <option value=""></option>
    <option value=""></option>
    ....
  </select>
</form>

Forms transmit data in the form name=value where name is the name attribute of the form object and value the content of the value attribute.
In the case of a list of options, the name that is passed with the form data is the name of the select tag and the value is the value of the option chosen.

For example:

<select name="mylist">
  <option value="option1"></option>
  <option value="option2"></option>
</select>

If the second option has been choosen, with date forms, this will be sent:

mylist=option2

And if an option has a selected attribute and the user has made no choice, the value of this option will be passed.

The selected attribute determines a default choice

By default, this is the first option that is selected if the user does not make a choice.
You can change the default by associating the selected attribute to another option.
Example:

<select name="color">
    <option value="orange"></option>
    <option value="blue" selected></option>
    <option value="red"></option>
    ....
</select>

In the example, the menu displays the default color blue and it is this option that will be sent with form data, if the user does not change the choice.

the selected attribute is sometimes also written:

 <option value="blue" selected="selected"> </ option>

This does not seem to bring anything more, at least with modern browsers.

The multiple attribute allow to select several options at once

Several options may be selected at once by combining the CTRL key with the mouse providing this property is added.

<select name="color" multiple>
    <option value="orange"></option>
    <option value="blue" selected></option>
    <option value="red"></option>
    ....
</select>

In this case, the name of the object is passed among the select form data with the value of each option clicked.
Thus if the user selects both the blue and red colors, there are these parameters in the URL:

?color=blue&color=red

The size attribute define the number of lines to display

It defines the number of items displayed at once. The default is 1.

In the demonstration below, you can see the size="4" property display four lines, thus four options.

The label attribute is assigned the content in the short form

An option has a value assigned to the value attribute, and text to display that is either included in the tag, or assigned to the label attribute.

In short form, the label attribute specifies the text to display. For example this option in long form:

 <option value="orange">Orange</option>

Can be written in short form:

 <option value="orange" label="Orange" />

If a label is added to the long form with a content included, it is the label value that is displayed and not the enclosed content.

The optgroup tag divides options

It creates a hierarchy of menu options by combining options into sub-menues.

<select name="color" multiple>
  <optgroup label="Color">
    <option value="orange">Orange</option>
    <option value="blue" selected>Blue</option>
    <option value="red">Red</option>
  </optgroup>
  <optgroup label="Size">
   <option value="one">One</un>
 </optgroup>
</select>

This will display this in the selection box:

Colors
   Orange
   Blue
   Red
Size
   One

Knowing the option chosen by the user thanks to JavaScript

To access select in JavaScript, and know what option the user has chosen, we use the selectedIndex attribute (defined in DOM).
If the select tag has the name "color", the following statement displays the number of the selected option, starting from zero:

document.forms[0].color.selectedIndex;

To access the values, with the options array:

var object = document.forms[0].couleur;
var index = object.selectedIndex;
var value =  object.options[index].value;
var content = object.options[index].text;

You can also select an option from JavaScript:

document.forms[0].color.selectedIndex = 3;

Dynamic management of lists in JavaScript is developed in the article Dynamic Select .

Demonstration of the select tag with a list a fruits

How do you pass the choice made by the user in a list from the form data sent to a script or another page. The JavaScript code:

Choose a value in the list and click Send to pass the form on the page, which will be reloaded.
Click on JavaScript to display the number of the selected option.

The JavaScript code:

function receive()
{
  var parameters = location.search.substring(1).split("&");
  var temp = parameters[0].split("=");
  varname = unescape(temp[0]);
  if(varname == "") return;
  value = unescape(temp[1]);
  alert(varname + "=" + value);
}
window.onload=receive;

The HTML code with the GET method for form data in URL: 

<form name="form1" method="get" action="select.php">
  <select name="color" id="color" multiple size="4">
    <option>orange</option>
    <option selected>blue</option>
    <option>green</option>
    <option>red</option>
  </select>
  <input type="submit" value="Send">
  <input type="button" value="Javascript" onClick="show()">
</form>

See also

© 2010-2012 Xul.fr