JavaScript Coder

How to get the value of a form element : Drop downs and lists

beginner javascript get drop down javascript get form javascript get select reference

This article is in continuation of getting form element values using JavaScript series.

Drop down list We can obtain a reference to this type of element using its name:

oSelectOne = oForm.elements["select_one_element_name"];

To get the index of the selected option in the JavaScript options array of the select element, we can use the selectedIndex property of the select element object:

index = oSelectOne.selectedIndex;

We can now use this index to determine the value of the selected option:

var selected_option_value = oSelectOne.options[index].value;

If we needed to get the text corresponding to the selected option, we would need to use the text property of the option element, instead of the value property:

var selected_option_text = oSelectOne.options[index].text;

Let’s say we need to find out the country selected by the user from a select-one list:


<select size="1" id="slt_country" name="country">
<option value=""> - Select - </option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>

...

<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>

The Javascript code that can be used to get the user-selected country:


var selected_index = oForm.elements["country"].selectedIndex;

if(selected_index > 0)
{
   var selected_option_value = oForm.elements["country"].options[selected_index].value;
   var selected_option_text = oForm.elements["country"].options[selected_index].text;
}
else
{
   alert('Please select a country from the drop down list');
}

Multi-select list

List box with multi-selection

If a select element has the additional attribute ‘multiple’, it allows users to select more than one option. Have a look at this HTML fragment:


<select name="job_category" id='slt_job_category' size="4" multiple='multiple'>

<option value="">- Select (Max 3) -</option>
<option value='1'>Software Development</option>
<option value='2'>Sales & Marketing</option>
<option value='3'>Customer Support & Communications</option>
<option value='4'>Advertising</option>
<option value='5'>Public Relations and Event Management</option>

...

<option value='22'>Oil & Gas</option>
<option value='23'>Construction</option>
<option value='24'>Other</option>

</select>

We can write a Javascript function to get all the user-selected options:


function getSelectedOptions(oList)
{
   var sdValues = [];
   for(var i = 1; i < oList.options.length; i++)
   {
      if(oList.options[i].selected == true)
      {
      sdValues.push(oList.options[i].value);
      }
   }
   return sdValues;
}

To use this function, we must first obtain a reference to the select-multiple object:

oList = oForm.elements["job_category"];

We now pass this object reference to the getSelectedOptions function above. In this function, we iterate over all the options in the options array. If an option is selected, the option object’s selected property will be true. In the function we use this condition to get the indices of all the options selected, and then push the values of all these options onto the array sdValues which is returned by the function. We can use this generic function to collect the values of selected options for any multi-select element in a form.

Example

See the demo

In the demo, you must have seen how skills are added one at a time to the skillset list, and there is also a provision for removing items added to the list. In order to implement this, we need to write a couple of Javascript functions:


function addOption(oList, optionName, optionValue)
{
    var oOption = document.createElement("option");
    oOption.appendChild(document.createTextNode(optionName));
    oOption.setAttribute("value", optionValue);
    oList.appendChild(oOption);
}
function removeOption(oList, index)
{
    oList.remove(index);
}

In JavaScript we can create elements dynamically using the createElement method of the document object. So to create an option, we pass the argument “option” to this method. To set the name of the option element that is displayed to the user, we use the method appendChild to create a child node. This is because in the DOM tree, the displayed text for an option element is a child of the option element. To set the value attribute, we can simply use the setAttribute method of the option element object. Finally, we append this newly created option element to the list as a child element itself.

Removing an option from a list is very simple. If we know the index of the option in the list, we can simply use the remove method of the list object to remove the option.

Download the code

Next: How to get the value of a form element : check box and radio button

See Also

Categories