javascript

Chapter 13: Scripting Forms
In this example, the selected options are retrieved from a select box. A for loop is used to construct a
message containing information about all of the selected options, including each option’s index, text, and
value. This can be used for select boxes that allow single or multiple selection.
Adding Options
There are several ways to create options dynamically and add them to select boxes using JavaScript. The
first way is to the use the DOM as follows:
var newOption = document.createElement(“option”);
newOption.appendChild(document.createTextNode(“Option text”));
newOption.setAttribute(“value”, “Option value”);
selectbox.appendChild(newOption);
This code creates a new < option > element, adds some text using a text node, sets its value attribute,
and then adds it to a select box. The new option shows up immediately after being created.
New options can also be created using the Option constructor, which is a holdover from pre - DOM
browsers. The Option constructor accepts two arguments, the text and the value , though the second
argument is optional. Even though this constructor is used to create an instance of Object , DOM -
compliant browsers return an < option > element. This means you can still use appendChild() to add
the option to the select box. Consider the following:
var newOption = new Option(“Option text”, “Option value”);
selectbox.appendChild(newOption); //problems in IE
This approach works as expected in all browsers except IE. Due to a bug, IE doesn ’ t set the text of the
new option correctly when using this approach.
Another way to add a new option is to use the select box ’ s add() method. The DOM specifies that this
method accepts two arguments: the new option to add and the option before which the new option
should be inserted. To add an option at the end of the list, the second argument should be null .
The IE implementation of add() is slightly different in that the second argument is optional and it must
be the index of the option before which to insert the new option. DOM - compliant browsers require the
second argument, so you can ’ t use just one argument for a cross - browser approach. Instead, passing
undefined as the second argument assures that the option is added at the end of the list in all browsers.
Here’s an example:
var newOption = new Option(“Option text”, “Option value”);
selectbox.add(newOption, undefined); //best solution
This code works appropriately in IE as well as DOM - compliant browsers. If you need to insert a new
option into a position other than last, you should use the DOM technique and insertBefore() .
As in HTML, you are not required to assign a value for an option. The Option
constructor works with just one argument (the option text).
454