Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Allowing Multiple Selections from Drop-down Select List

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.

<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>
<input type="button" value="Get Selection" 

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++)
      strMsg = strMsg + list.options[i].value + "\n";

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268