javascript select option , javascript dropdown list , javascript combobox

Javascript Combobox

A dropdown list provides a method of selecting only one option from a lots of options while only using up as much space as a single option except while a selection is being made.

Javascript Select options

Full Source

<html>
<body>
<select id="colors">
  <option value="1">Red</option>
  <option value="2">Blue</option>
  <option value="3">Green</option>
  <option value="4">Yellow</option>
  <option value="5">Orange</option>
</select>
</body>
</html>

Get the selected value of dropdown list using JavaScript

The following program shows how to get selected index value or selected text from a Javascript dropdownlist

Full Source

<html>
<head>
<script type="text/javascript">
function findDay()
{
var eID = document.getElementById("daysCombo");
var dayVal = eID.options[eID.selectedIndex].value;
var daytxt = eID.options[eID.selectedIndex].text;
alert("Selected Item  " +  daytxt + ", Value " + dayVal);
}
</script>
</head>
<body>
<select id="daysCombo">
<option value="1">Sunday</option>
<option value="2" selected="selected">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
<br><br>
	<button onclick="findDay()">Get Selected Day</button>
</body>
</html>

Also the following code will help you to select item from selection option by index number.

document.getElementById("daysCombo").options.item(6).text;

dropdown list onchange event

The following program shows how to dropdown list onchange event in Javascript. While you change the selection from javascriptcombobox you can see the color of Div element is changing.

Change my color

Full Source

<html>
<head>
<script type="text/javascript">
function changeColor() {
var eID = document.getElementById("colors");
var colorVal = eID.options[eID.selectedIndex].value;
var colortxt = eID.options[eID.selectedIndex].text;
document.getElementById('colorDiv').style.background=colortxt;
}
</script>
</head>
<body>
<select id="colors" onchange="changeColor()">
  <option value="1">Red</option>
  <option value="2">Blue</option>
  <option value="3" >Green</option>
  <option value="4">Yellow</option>
  <option value="5">Orange</option>
  <option value="6" selected="selected">White</option>
</select>
<br><br>
<div id="colorDiv" style="width:200px;height:50px;border:1px solid black;">
Change my color
</div>
</body>
</html>

How to set selected value in a Dropdownlist

In a Javascript combobox you can set a selected value as you wish.

Javascript dropdown list Set selected value

When you click the button, you can see the color "Orange" is selected.

Full Source

<html>
<head>
<script type="text/javascript">
function changeSelection()
{
var eID = document.getElementById("colors");
eID.options[4].selected="true";
}
</script>
</head>
<body>
<select id="colors">
  <option value="1">Red</option>
  <option value="2">Blue</option>
  <option value="3">Green</option>
  <option value="4">Yellow</option>
  <option value="5">Orange</option>
</select>
<br><br>
	<button onclick="changeSelection()">Set selected value</button>
</body>
</html>

Loop through all options in a dropdown list

var x = document.getElementById("colors");
for (var i = 0; i < x.length; i++)
{
	alert(x.options[i].text);
}

How to remove an option from dropdownlist

var rmOption = document.getElementById("colors");
rmOption.options.remove(1);