HTML/JavaScript - Choose dropdown options using JavaScript

select, options, selectedIndex, selected

Try It

Choose one option at a time

Click the buttons to make a selection

Choose more than one option in a multiple list

Check one or more checkboxes, then click "Select checked"

Overview

The first example is a drop down select list, where only one option can be selected. Refer below to the code in function selectOption. In that function, a selection is made programmatically by setting select's selectedIndex attribute to a zero-based number. When the "alert" button is clicked, a message pops up with the selectedIndex.

The second example is a multiple select list, where more than one option can be selected. Refer below to the code in function selectMultipleOptions. In that function, multiple options are selected programmatically by setting each option's selected attribute to true or false. When the "alert" button is clicked, a message pops up with the selectedIndex. For a multiple select, that is the first option selected.

Source

Public Domain

The HTML and JavaScript listed below are released to the public domain. Read the Terms of Use for details. The contents of this page are still copyrighted.

JavaScript

function selectOption(num)
{
	var selObj = document.getElementById('selSeaShells1');
	selObj.selectedIndex = num;
}
function selectMultipleOptions(num)
{
	var selObj = document.getElementById('selSeaShells2');
	selObj.options[0].selected = document.getElementById('chk0').checked;
	selObj.options[1].selected = document.getElementById('chk1').checked;
	selObj.options[2].selected = document.getElementById('chk2').checked;
	selObj.options[3].selected = document.getElementById('chk3').checked;
	selObj.options[4].selected = document.getElementById('chk4').checked;
}
function alertSelectedIndex(selId)
{
	alert('selectedIndex for ' + selId + ' is: '
	 + document.getElementById(selId).selectedIndex);
}

HTML

<form>
<h3>Choose one option at a time</h3>
<select name="selSS1" id="selSeaShells1">
	<option value="val0">sea zero</option>
	<option value="val1">sea one</option>
	<option value="val2">sea two</option>
	<option value="val3">sea three</option>
	<option value="val4">sea four</option>
</select>
<input type="button" value="0" onclick="selectOption(0);" />
<input type="button" value="1" onclick="selectOption(1);" />
<input type="button" value="2" onclick="selectOption(2);" />
<input type="button" value="3" onclick="selectOption(3);" />
<input type="button" value="4" onclick="selectOption(4);" />
<input type="button" value="alert" onclick="alertSelectedIndex('selSeaShells1');" />

<h3>Choose more than one option in a multiple list</h3>
<select name="selSS2" id="selSeaShells2" multiple="multiple" size="5">
	<option value="val0">sea zero</option>
	<option value="val1">sea one</option>
	<option value="val2">sea two</option>
	<option value="val3">sea three</option>
	<option value="val4">sea four</option>
</select>
<input type="checkbox" id="chk0" />
<input type="checkbox" id="chk1" />
<input type="checkbox" id="chk2" />
<input type="checkbox" id="chk3" />
<input type="checkbox" id="chk4" />
<input type="button" value="Select checked" onclick="selectMultipleOptions();" />
<input type="button" value="alert" onclick="alertSelectedIndex('selSeaShells2');" />
</form>

Original Example

2005-09-02
This page used to have a different example (including a multiple toggle). It was taken down because the overall code is too similar to tutorial002. The original tutorial003 source is available in tutorial003_orig.js

About this page: