Manipulation of HTML Select Element with Javascript

Manipulation of the <select> element with Javascript is quite commonly required in web applications. This tutorial explains how you can perform common operations on select element with vanilla Javascript — adding/deleting options or getting/setting the selected options.

Important Properties and Methods of Select Element

• value : It gives the value of the first selected option (a multi-valued select may have multiple selected options)
• options : It gives the list of all option elements in the select
• selectedOptions : It gives the list of option elements that are currently selected
• selectedIndex : It is an integer that gives the index of first selected option. In case no option is selected, it gives -1
• add() : This method adds a new option to the list of options
• remove() : This method removes an option from the select element

Important Properties of Option Element

• value : It gives the value of the option
• text : It gives the text inside the option
• selected : It tells whether the option is selected or not

Setting Value of Select Element

For a single valued select, setting its value can be done with the value or the selectedIndex property.

<select id="choose-fruit">
	<option value="Apple">Apple</option>
	<option value="Orange">Orange</option>
	<option value="Banana">Banana</option>
</select>

// Set option with value 'Orange' as selected
document.querySelector('#choose-fruit').value = 'Orange';

// Set the option with index 2 as selected => Sets the 'Banana' option as selected
document.querySelector('#choose-fruit').selectedIndex = 2;

For a multiple valued select, setting multiple selected options can be done by setting the selected attribute of the required option.

<select id="choose-fruit-multiple" multiple>
	<option value="1">Apple</option>
	<option value="2">Orange</option>
	<option value="3">Banana</option>
	<option value="4">Guava</option>
	<option value="5">Grapes</option>
</select>

// choose the first option
document.querySelector('#choose-fruit-multiple').options[0].selected = true;

// also choose the third option
document.querySelector('#choose-fruit-multiple').options[2].selected = true;

This will obviously work for single valued select also, but using the value property is much direct for them.

Getting the Value and Text/Label of the Selected Options

The selectedOptions property of the select element gives the list of options that are currently selected. Each element in this list is a DOM <option> element — so you can use the value and text property to get the value and inside text of the option.

// For a normal select (and not multi-select) the list would contain only a single element
var text = document.querySelector('#choose-fruit').selectedOptions[0].text;
var value = document.querySelector('#choose-fruit').selectedOptions[0].value;

For a multiple select element, you can loop over the list to get all selected options.

<select id="choose-fruit-multiple" multiple>
	<option value="1">Apple</option>
	<option value="2" selected>Orange</option>
	<option value="3">Banana</option>
	<option value="4">Guava</option>
	<option value="5" selected>Grapes</option>
</select>

var selected_options = document.querySelector('#choose-fruit-multiple').selectedOptions;

for(var i=0; i<selected_options.length; i++) {
	// echoes the text of the option
	console.log(selected_options[i].text);
	
	// echoes the value of the option
	console.log(selected_options[i].value);
}

// output
Orange
2
Grapes
5

Adding an Option

The add method can be used to add a new option in the select. You can also specify the exact positon where the option needs to be inserted.

<select id="choose-car">
	<option value="Volvo">Volvo</option>
	<option value="Audi">Audi</option>
	<option value="Mercedes">Mercedes</option>
</select>

var option = document.createElement('option');
option.text = 'BMW';

// append option at the end
// new options will be Volvo, Audi, Mercedes & BMW
document.querySelector('#choose-car').add(option, null);

var option = document.createElement('option');
option.text = 'BMW';

// append option before index 0
// new options will be BMW, Volvo, Audi & Mercedes 
document.querySelector('#choose-car').add(option, 0);

var option = document.createElement('option');
option.text = 'BMW';

// append option before index 2
// new options will be Volvo, Audi, BMW & Mercedes 
document.querySelector('#choose-car').add(option, 2);

Deleting an Option

The remove method can be used to delete an option at a specified index.

// remove the option at index 1
// new options will be Volvo & Mercedes
document.querySelector('#choose-car').remove(1);