Allowing Multiple Selections from Drop-down Select List
By Stephen Bucaro
An HTML Select list is a form control used to create a drop-down list of items from which
the user can select. Each item in a select list is defined by an option element. You can
allow the user to select multiple items in the list by setting its multiple attribute.
Code for a select list with its multiple attribute set is shown below.
<form>
<select name="mySelect" size="7" multiple="multiple">
<option value="Bread">Bread</option>
<option value="Coffee">Coffee</option>
<option value="Fruit">Fruit</option>
<option value="Pie">Pie</option>
<option value="Salad">Salad</option>
<option value="Soup">Soup</option>
<option value="Wine">Wine</option>
</select>
<input type="button" value="Get Selection"
onclick="grabSelection(this.form.mySelect)">
</form>
The user can select multiple items in the list by pressing the Keyboard Ctrl key,
or by selecting an item and pressing and holding the Shift key while selecting another
item. This second method allows the user to select a range of items from the list.
When the user selects items in a select list, the selected property of the option
is set. The select list options are an array with indexes that start at 0 for the first
option. The code below shows one way to access the indexes of the options set to selected,
and then to access the value property of those options.
<script type="text/javascript">
function grabSelection(list)
{
var strMsg = "";
for(var i = 0; i < list.length; i++)
{
if(list.options[i].selected)
{
strMsg = strMsg + list.options[i].value + "\n";
}
}
alert(strMsg);
}
</script>
A select list is a form control, in this code the onclick event of the button
passes the select list to the grabSelection function. There may be other controls
in the form. In that case, you use the form button to pass the entire form.
More Java Script Code:
• Password Protection Using the JavaScript Cookie Method
• Concatenating a String and Another Data Type
• Java Script Code to Calculate Speed / Distance of Falling Object
• Round a Float to 4 Digits to the Right of the Decimal Point
• JavaScript Code for Binary to Decimal - Decimal to Binary Conversion
• Java Script Code for a Random Circle Generator
• Create a Mouse Click Sound Effect
• A JavaScript Function That Returns a Function
• Using the Java Script Array Object
• Easy Moving Popup Code
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
