Add options to an HTML select box with Javascript

Table of Contents

This Javascript post was going to be about language selection in FCKEditor from a drop down box as a follow up to the previous FCKEditor post but I’ve decided to postphone that post until Friday and look at how to add options to an HTML <select> drop down box with Javascript, because the next FCKEditor post will be doing just that.

The HTML

The example select box is initially unpopulated and the HTML for it looks like this:

<select id="example-select"></select>

Adding hard-coded values

To add a new option to it, with the text “Text 1” displaying in the drop down box, and the value “Value1” being what would be submitted from the form, do this:

var select = document.getElementById("example-select");
select.options[select.options.length] = new Option('Text 1', 'Value1');

Adding options from an array

If you had an array that has name-value pairs and you wanted to use the index from the array as the value for the options and the array value as the text to display, you could do this:

var example_array = {
    ValueA : 'Text A',
    ValueB : 'Text B',
    ValueC : 'Text C'
};

var select = document.getElementById("example-select");
for(index in example_array) {
    select.options[select.options.length] = new Option(example_array[index], index);
}

Resetting the select

To reset the select box so it no longer has any options, set the length of the options property to zero like so:

var select = document.getElementById("example-select");
select.options.length = 0;

Displaying the selected option

To do a window.alert to show the current text and value of the selected option do this:

var select = document.getElementById("example-select");
if(select.options.length > 0) {
    window.alert("Text: " + select.options[select.selectedIndex].text + "\nValue: " + select.options[select.selectedIndex].value);
}
else {
    window.alert("Select box is empty");
}

Example in action

And finally, here’s all of the above in action. If you are reading this in a feed reader the Javascript may not work. If it doesn’t then click through to this post in a web browser.

Friday’s post will look at how to add a language selection drop down box in FCKEditor, using the way of populating a select drop down box with Javascript from an array as shown in this post.