Skip to main content | Turn off styling Default page style

Question & Answer index

Select Box Fun

Wondering how to make your webpage "do stuff" when the user selects a value from a drop-down list? Add an onchange event to your select, like this:

<select onchange="updateField(this.options[this.selectedIndex]);" name="selectBox1" id="selectBox1">

Is "value" not enough for you and you want to use something other than "value"? Add custom attributes to your select box, like this (I added "made_in".):

<option value="Ford" made_in="United States">Ford</option>

The updateField function shows how to get the value of the selected item, as well as how to get any of the custom attributes you've created

function updateField(selectedItem){
    var newVal = selectedItem.value;
    var made_in = selectedItem.getAttribute('made_in');
    document.getElementById("show_selectedValue").value = newVal;
    document.getElementById("show_made_in").value = made_in;

And... here it is altogether: