Java Server Pages, Java Programming - Cheap Web Hosting Blog

105Chapter 9Forms and Form ElementsThe most important property of the selectobject itself is the selectedIndexproperty, accessed as follows: document.form[0].selectName.selectedIndexThis value is the index number of the currently selected item. As with most index countingschemes in JavaScript, the first item (the one at the top of the list) has an index of zero. TheselectedIndexvalue is critical for enabling you to access properties of the selected option. Two important properties of an option item are textand value, accessed as follows: document.forms[0].selectName.options[n].textdocument.forms[0].selectName.options[n].valueThe textproperty is the string that appears onscreen in the selectobject. It is unusual forthis information to be exposed as a formobject property because in the HTML that generatesa selectobject, the text is defined as an tag s nested text. But inside the tag, you can set a valueattribute, which, like the radio buttons shown earlier, enables you toassociate some hidden string information with each visible entry in the list. To read the valueor textproperty of a selected option most efficiently for all browsers, youcan use the selectobject s selectedIndexproperty as an index value to the option. References for this kind of operation get pretty long, so take the time to understand what shappening here. In the following function, the first statement creates a shortcut reference tothe selectobject. The selectedIndexproperty of the selectobject is then substituted forthe indexvalue of the optionsarray of that same object: function inspect() { var list = document.forms[0].choices; var chosenItemText = list.options[list.selectedIndex].value; } To bring a selectobject to life, use the onchangeevent handler. As soon as a user makes anew selection in the list, this event handler runs the script associated with that event han- dler. Listing 9-4 shows a common application for a selectobject. Its text entries describeplaces to go in and out of a Web site, while the valueattributes hold the URLs for those locations. When a user makes a selection in the list, the onchangeevent handler triggers ascript that extracts the valueproperty of the selected option and assigns that value to thelocation.hrefobject property to effect the navigation. Under JavaScript control, this kindof navigation doesn t need a separate Go button on the page. Listing 9-4:Navigating with a select Object Continued

This entry was posted on Saturday, July 28th, 2007 at 7:02 pm and is filed under Tomcat. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.