Form Manipulation
Selection Menus (Drop-down Menus)
Selection menus make sense when you have a large list of items from which to choose. The HTML for setting up the drop-down and the result is shown below.
HTML<label>Select state </label> <select id="states"
onchange="setState(this.options[this.selectedIndex].value);">
<option value="1">Georgia</option>
<option value="2">Alabama</option>
<option value="3">Florida</option>
<option value="4">Tennessee</option>
<option value="5">South Carolina</option>
<option value="6">North Carolina</option>
</select>
The select tag is the parent tag of the children option tags. Since the selection can only have 1 value assigned to it at once, only the parent tag has a value, which is inherited from selected option's value. So, if you select "Tennessee", then the selection menu which has an id of state will have a value of 4.
To specify the value of the self selection menu, we specify the self selection menu, then the selected index. The self value will be given by the argument this.options[this.selectedIndex].value.
How to Get Text of Selected Item
If you want the text of the selected item, then you can change the values of the options to match the text. If it's necessary to give different values rather than the text, then we can use a little Javascript to get the text.
HTML<p>Select a state above. Then click on the button below to get the
text of the selected option. The result will be shown here.</p>
<p>You selected <span id="selected_state"> ?? </span>.</p>
<input type="button" value="Get State" onclick="getText('states')"/>
Javascript
function getText(myObj) {
var selIndex = document.getElementById(myObj).selectedIndex;
var selText = document.getElementById(myObj).options[selIndex].text;
changeValue('selected_state',selText);
}
Select a state above. Then click on the button below to get the text of the selected option. The result will be shown here.
You selected ?? .
As you may have guessed, the index number that is returned is simply the nth position of the selection option starting with 0.
How to Change Selection with Another Control
If you need to change the selection with another control, such as a button, then it can be done by specifying the value of the option.
HTML<p>Select a unit other than inches from the menu below. Then click on
the "Inches" button to have the selction change to inches.
The second button sets the value of selection menu to 11,
which is not a value of any of the options. Clicking on it does nothing.</p>
<label>Unit </label> <select id="unit">
<option value="1">Millimeters</option>
<option value="10">Centimeters</option>
<option value="1000">Meters</option>
<option value="1000000">Kilometers</option>
<option value="25.4">Inches</option>
<option value="304.8">Feet</option>
<option value="914.4">Yards</option>
<option value="1609344">Miles</option>
</select>
<input type="button" value="Inches" onclick="getObj('unit').value='25.4'"/>
<input type="button" value="Eleven" onclick="getObj('unit').value='11'"/>
<br/><br/>
<p>This button selects an option by changing its index:
<input type="button" value="Change by Index"
onclick="getObj('unit').selectedIndex ='5'"/>. </p>
Select a unit other than inches from the menu below. Then click on the "Inches" button to have the selction change to inches. The second button sets the value of selection menu to 11, which is not a value of any of the options. Clicking on it does nothing.
This button selects an option by changing its index: .
Next: Forms - Drop-downs