Web design course - 597Chapter 26 .Select, Option, and FileUpload Objects The
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.