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 object
If you had an object that you wanted to use the property name as the value for the options, and the property value as the text to display, you could do this:
var myobject = {
ValueA : 'Text A',
ValueB : 'Text B',
ValueC : 'Text C'
};
var select = document.getElementById("example-select");
for(index in myobject) {
select.options[select.options.length] = new Option(myobject[index], index);
}
Note that while the above is an object, it’s often referred to incorrectly as an associative array, even though technically it is not. It can be accessed as an object e.g. myobject.ValueA, or like an array would be e.g. myobject[‘ValueA’]
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.
Next post
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.
