This is in continuation of the previous article: How to set the value of a form field using JavaScript
Selecting options of a select element through javascript
In Javascript, since each <option> tag inside a <select> tag, is placed in the options array of the select object, we can access each select option using a construct such as:
selectObject.options[index]
where, “index” refers to the position of the option in the array.
Also, each option object has a “selected” attribute that can be set to boolean true or false. For instance, the code snippet below selects the option with index “i” in the options array.
selectObject.options[i].selected = true;
We can also use the select object’s selectedIndex property to achieve the same result:
selectObject.selectedIndex = i;
To find out the number of options, use the length attribute of the select object:
selectObject.length
Finally, to find out the value of the option (Note: this is not the text displayed for the user), we can use the value attribute for the option:
selectObject.options[i].value
Let us look at an example to demonstrate the use of JavaScript to select options in a form.
The HTML for the form:
<form name="check_letter_frm" action="#">
Enter a letter: </label><input type="text" name="check_letter" size="1">
<input type="button" name="matching_word" value="Select matching Word" onclick="set_matching_word(this.form.letters, this.form.check_letter);">
Matching Word: <select name="letters">
<option></option>
<option value="a">apple</option>
<option value="b">banana</option>
<option value="c">carrot</option>
<option value="d">daisy</option>
<option value="e">elephant</option>
<option value="f">fox</option>
...
<option value="z">zoo</option>
</select>
</form>
Here is the JavaScript code for the word finder functionality:
function set_matching_word(selectObj, txtObj)
{
var letter = txtObj.value;
for(var i = 0; i < selectObj.length; i++)
{
if(selectObj.options[i].value == letter)
selectObj.selectedIndex = i;
}
}
We iterate over all the options, and checks if the value of each option is the same as the letter provided by the user. If it does, then that option is selected. The code for this example can be downloaded from here.
Selecting multiple options of a select element through JavaScript
We first add a “multiple” attribute to the tag :
<select name="letters" multiple='multiple' size="5">
The “size” attribute is to give the number of options that are visible at a time for the select field.
In this form, since every letter can have multiple matching words. Unlike in the previous example, we cannot use the letter to uniquely determine the corresponding words. So, we simply use the word itself as the value of the option element, for each option, and use the charAt() JavaScript function to determine the value of the first character. But first, let us have a look at the changes in the HTML of the new form:
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
The Javascript function is very similar to the previous one.
function set_matching_words(selectObj, txtObj)
{
var letter = txtObj.value;
for(var i = 0; i < selectObj.length; i++)
{
if(selectObj.options[i].value.charAt(0) == letter)
{
selectObj.options[i].selected = true;
}
else
{
selectObj.options[i].selected = false;
}
}
}
In the code above, charAt(0) gives us the first character of each option’s value, which we then match with the letter entered by the user. Whenever a match is found, we set the option object’s selected property to true.
Checking radio elements and check boxes through javascript
In an HTML form, radio elements can be grouped together, and all radio elements in a single group must have the same name. This allows them to be accessed as a single group. Each such radio element has a corresponding radio object which is placed in an array that we can iterate programmatically.
The code below checks a radio element:
formObject.radio_element_group_name[index].checked==true
The “radio_element_group_name” is the common name for all the radio elements, and is also the name of the Javascript array holding references to each radio element. Using an “index”, we can obtain a reference to an individual radio element in this array. We can then set the “checked” property of this radio element object to boolean true or false.
The code for checking and un-checking checkboxes is very similar. Let us look at an example
targetFormObj.backups_needed.checked = true;
where, targetFormObj is the object reference to the first form and backups_needed is the name of the checkbox we want to check through JavaScript.