Multiple select drop down list

Multiple select drop down list - Javascript

Tagged in : Javascript

The following code allows you to select multiple options in select box and stores the value in an array.

<html>
<head>
<title>Multiple-Select Dropdown List Example by brokenfish</title>
<style type="text/css">
/* Specify the styles of selected/unselected items. */
.normal
{
background: #FFF;
}
.highlight
{
background: #CCC;
}
</style>
<script type="text/javascript">
/* Multiple-Select Dropdown List Example by brokenfish */
var list = new Array();
function selectoption(value)
{
if (value == '-') return;
var nlist = true;
var sbox = document.getElementById('selectbox'); // Change 'selectbox' to whatever ID you give your <select>.
var items = sbox.options;
for (var i = 0; i < list.length; i++)
{
if (list[i] == value)
{
list.splice(i, 1);
nlist = false;
items[sbox.selectedIndex].className = 'normal'; // Change 'normal' to whatever class you want unselected items to use.
}
}
if (nlist)
{
list.splice(list.length - 1, 0, value);
items[sbox.selectedIndex].className = 'highlight'; // Change 'highlight' to whatever class you want selected items to use.
}
sbox.selectedIndex = 0;
}
function listSelected()
{
if (list.length == 0) alert('No Items Selected');
else alert('Selected Items: ' + list.join(', '));
}
</script>
</head>
<body>

<select name="example" id="selectbox" onchange="selectoption(this.value);">
<option value="-">Select Items Below</option>
<option value="0">Option 1</option>
<option value="1">Option 2</option>

</select>

<input type="button" value="List Selected" onclick="listSelected();" />

</body>
</html>

By Rekha, On - 2009-08-24

PreviousNext