Web site traffic - 703Chapter 24Select, Option, and FileUpload ObjectsModifying select options
Monday, November 26th, 2007703Chapter 24Select, Option, and FileUpload ObjectsModifying select options (W3C DOM) Yet another approach is possible in browsers that closely adhere to the W3C DOM Level 2standard. In NN6+, Moz1+, and Safari1+, for example, you can use the add()and remove() methods of the selectelement object. They work very much like the same-named methodsfor the optionsarray in IE4+, but these are methods of the selectelement object itself. Theother main difference between the two syntaxes is that the add()method does not use theindex value as the second parameter but rather a reference to the optionelement objectbefore which the new option is inserted. The second parameter is required, so to simplyappend the new item at the end of the current list, supply nullas the parameter. Listing 24-3shows the W3C-compatible version of the selectelement modification scripts shown inListings 24-1 and 24-2. I highlight source code lines in bold that exhibit differences betweenthe IE4+ and W3C DOM versions. Listing 24-3:Modifying select Options (W3C) // change color language setfunction setLang(which) { var listObj = document.forms[0].colors; var newOpt; // filter out old IE browsersif (listObj.type) { // find out if it s 3 or 6 entriesvar listLength = listObj.length; // save selected indexvar currSelected = listObj.selectedIndex; // replace individual existing entriesfor (var i = 0; i < listLength; i++) { newOpt = document.createElement( option ); newOpt.text = (which == plain ) ? plainList[i] : hardList[i]; listObj.remove(i); listObj.add(newOpt, listObj.options[i]); } listObj.selectedIndex = currSelected; } } // create entirely new options listfunction setCount(choice) { var listObj = document.forms[0].colors; var newOpt; // filter out old browsersif (listObj.type) { // get language settingvar lang = (document.forms[0].geekLevel[0].checked) ? plain : hard ; // empty options from listwhile (listObj.options.length) { listObj.remove(0); } // create new option object for each entryfor (var i = 0; i < choice.value; i++) { newOpt = document.createElement( option ); Continuedselect
From our experience, we can recommend PHP5 Web Hosting services, if you need affordable webhost to host and run your web application.