599Chapter 26 .Select, Option, and FileUpload Objects listObj.remove(i) listObj.add(newOpt, listObj.options[i]) } listObj.selectedIndex = currSelected } } // create entirely new options list function setCount(choice) { var listObj = document.forms[0].colors var newOpt // filter out old browsers if (listObj.type) { // get language setting var lang = (document.forms[0].geekLevel[0].checked) ? plain : hard // empty options from list while (listObj.options.length) { listObj.remove(0) } // create new option object for each entry for (var i = 0; i < choice.value; i++) { newOpt = document.createElement( OPTION ) newOpt.text = (lang == plain ) ? plainList[i] : hardList[i] listObj.add(newOpt, null) } listObj.options[0].selected = true } } As with the IE version, the W3C version offers no specific benefit over the origi nal, backward-compatible approach. Choose the most modern one that fits the types of browsers you need to support with your page. Properties length Value: Integer Read/Write (see text) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . Like all JavaScript arrays, the options array has a length property of its own. But rather than having to reference the options array to determine its length, the SELECT object has its own length property that you use to find out how many items are in the list. This value is the number of options in the object. A SELECT object with three choices in it has a length property value of 3. SELECT.length
You need excellent and relaible webhost company to host your web applications? Then pay a visit to Inexpensive Web Hosting services.

598 Part III . Document Objects Reference Listing 26-2 (continued) var lang = (document.forms[0].geekLevel[0].checked) ? plain : hard // empty options from list while (listObj.options.length) { listObj.options.remove(0) } // create new option object for each entry for (var i = 0; i < choice.value; i++) { newOpt = document.createElement( OPTION ) newOpt.text = (lang == plain ) ? plainList[i] : hardList[i] listObj.options.add(newOpt) } listObj.options[0].selected = true } } Modifying SELECT options (W3C DOM) Yet another approach is possible in browsers that closely adhere to the W3C DOM Level 2 standard. In NN6, for example, you can use the add()and remove() methods of the SELECT element object. They work very much like the same-named methods for the optionsarray in IE4+, but these are methods of the SELECT element object itself. The other main difference between the two syntaxes is that the NN6 add()method does not use the index value as the second parameter but rather a reference to the OPTION element object before which the new option is inserted. The second parameter is required, so to simply append the new item at the end of the current list, supply nullas the parameter. Listing 26-3 shows the W3C-compatible version of the SELECT element modification scripts shown in Listings 26-1 and 26-2. I highlight source code lines in bold that exhibit differences between the IE4+ and W3C DOM versions. Listing 26-3: Modifying SELECT Options (NN6+) // change color language set function setLang(which) { var listObj = document.forms[0].colors var newOpt // filter out old IE browsers if (listObj.type) { // find out if it s 3 or 6 entries var listLength = listObj.length // save selected index var currSelected = listObj.selectedIndex // replace individual existing entries for (var i = 0; i < listLength; i++) { newOpt = document.createElement( OPTION ) newOpt.text = (which == plain ) ? plainList[i] : hardList[i] SELECT
In case you need quality webspace to host and run your web applications, try our personal web hosting services.

597Chapter 26 .Select, Option, and FileUpload Objects The two options array methods are add() and remove(). The add() method takes one required parameter and one optional parameter. The required parameter is a reference to an OPTION element object that your script creates in another statement (using the document.createElement() method). If you omit the second parameter to add(), the new OPTION element is appended to the current collection of items. But you can also specify an index value as the second parameter. The index points to the position in the optionsarray where the new item is to be inserted. Listing 26-2 shows how to modify the two main functions from Listing 26-1 using the IE approach exclusively (changes and additions appear in bold). The script assumes that only IE browsers ever load the page (in other words, there is no filtering for browser brand here). When replacing one set of options with another, there are two approaches demonstrated. In the first (the setLang()function), the replacements have the same number of items, so the length of existing options provides a counter and index value for the remove()and add() methods. But when the number of items may change (as in the setCount()function), a tight loop removes all items before they are added back via the add()method without a second parameter (items are appended to the list). The approach shown in Listing 26-2 has no specific benefit over that of Listing 26-1. Listing 26-2: Modifying SELECT Options (IE4+) // change color language set function setLang(which) { var listObj = document.forms[0].colors var newOpt // filter out old IE browsers if (listObj.type) { // find out if it s 3 or 6 entries var listLength = listObj.length // save selected index var currSelected = listObj.selectedIndex // replace individual existing entries for (var i = 0; i < listLength; i++) { newOpt = document.createElement( OPTION ) newOpt.text = (which == plain ) ? plainList[i] : hardList[i] listObj.options.remove(i) listObj.options.add(newOpt, i) } listObj.selectedIndex = currSelected } } // create entirely new options list function setCount(choice) { var listObj = document.forms[0].colors var newOpt // filter out old browsers if (listObj.type) { // get language setting Continued SELECT
In case you need quality webspace to host and run your web applications, try our personal web hosting services.

596 Part III . Document Objects Reference Figure 26-1: Radio button choices alter the contents of the SELECT object on the fly. In the second pair of radio buttons, each button stores a value indicating how many items should be displayed when the user clicks the button. This number is picked up by the setCount()function and is used in the repeat loop as a maximum counting point. In the meantime, the function finds the selected language radio button and zeros out the SELECT object entirely. Options are rebuilt from scratch using the new Option()constructor for each option. The parameters are the corresponding display text entries from the arrays. Because none of these new options have other properties set (such as which one should be selected by default), the function sets that property of the first item in the list. Notice that both functions call history.go(0) for NN3 and NN4 browsers after setting up their SELECT objects. The purpose of this call is to give these earlier Navigator versions an opportunity to resize the SELECT object to accommodate the contents of the list. The difference in size here is especially noticeable when you switch from the six-color, plain-language list to any other list. Without resizing, some long items are not readable. IE4+ and NN6, on the other hand, automatically redraw the page to the newly sized form element. Modifying SELECT options (IE4+) Microsoft offers another way to modify SELECT element options for IE4+, but the technique involves two proprietary methods of the optionsarray property of the SELECT object. Because I cover all other ways of modifying the SELECT element in this section, I cover the IE way of doing things here as well. SELECT
Looking for affordable and reliable webhost to host and run your business application? Then look no more and go to servlet web hosting services.

595Chapter 26 .Select, Option, and FileUpload Objects

Flying Select Options

Choose a palette size: Three Six

Choose geek level: Plain-language Gimme hex-triplets!

Select a color: cyan magenta yellow

In an effort to make this code easily maintainable, the color choice lists (one in plain language, the other in hexadecimal triplet color specifications) are established as two separate arrays. Repeat loops in both large functions can work with these arrays no matter how big they get. The first two radio buttons (see Figure 26-1) trigger the setLang()function. This function s first task is to extract a reference to the SELECT object to make additional references shorter (just listObj). Then by way of the length property, you find out how many items are currently displayed in the list because you just want to replace as many items as are already there. In the repeat loop, you set the text property of the existing SELECT options to corresponding entries in either of the two array listings. SELECT
Check Tomcat Web Hosting services for best quality webspace to host your web application.

594 Part III . Document Objects Reference Listing 26-1 (continued) // filter out old browsers if (listObj.type) { // find out if it s 3 or 6 entries var listLength = listObj.length // save selected index var currSelected = listObj.selectedIndex // replace individual existing entries for (var i = 0; i < listLength; i++) { if (which == plain ) { listObj.options[i].text = plainList[i] } else { listObj.options[i].text = hardList[i] } } if (isPreNN6) { history.go(0) } else { listObj.selectedIndex = currSelected } } } // create entirely new options list function setCount(choice) { var listObj = document.forms[0].colors // filter out old browsers if (listObj.type) { // get language setting var lang = (document.forms[0].geekLevel[0].checked) ? plain : hard // empty options from list listObj.length = 0 // create new option object for each entry for (var i = 0; i < choice.value; i++) { if (lang == plain ) { listObj.options[i] = new Option(plainList[i]) } else { listObj.options[i] = new Option(hardList[i]) } } listObj.options[0].selected = true if (isPreNN6) { history.go(0) } } } SELECT
We recommend cheap and reliable webhost to host and run your web applications: Coldfusion Web Hosting services.

593Chapter 26 .Select, Option, and FileUpload Objects . Text to be displayed in the option . Contents of the option s value property . Whether the item is the defaultSelected option (Boolean) . Whether the item is selected (Boolean) You can set any (or none) of these items as part of the constructor and return to other statements to set their properties. I suggest setting the first two parameters (leave the others blank) and then setting the selectedproperty separately. The following is an example of a statement that creates a new, fifth entry in a SELECT object and sets both its displayed text and valueproperties: selectObj.options[4] = new Option( Yahoo , http://www.yahoo.com ) To demonstrate all of these techniques, Listing 26-1 enables you to change the text of a SELECT object first by adjusting the text properties in the same number of options and then by creating an entirely new set of options. Radio button onClick event handlers trigger functions for making these changes rare examples of when radio buttons can logically initiate visible action. Listing 26-1: Modifying SELECT Options