CD-502 Part VI ✦ Appendixes Listing 25-6 (continued) } } </SCRIPT> </HEAD> <BODY onSubmit=”checkIt(this); return false”> <FORM> Enter any positive integer: <INPUT TYPE=”text” NAME=”numeric” onChange=”checkIt(this.form)”><P> </FORM> </BODY> </HTML> TEXTAREA Element Object Properties cols rows NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator to play with the cols and rows property settings for the Results textarea on that page. Shrink the width of the textarea by entering the following statement into the top text box: document.forms[0].output.cols = 30 And make the textarea one row deeper: document.forms[0].output.rows++ TEXTAREA.cols CD-503 Appendix F ✦ Examples from Parts III and IV Methods createTextRange() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See the example for the TextRange.move() method in Chapter 19 to see how to control the text insertion pointer inside a TEXTAREA element. Chapter 26 Examples The following sections contain examples from Chapter 26, “Select, Option, and FileUpload Objects.” SELECT Element Object Properties length NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example See Listing 26-1 for an illustration of the way you use the length property to help determine how often to cycle through the repeat loop in search of selected items. Because the loop counter, i, must start at 0, the counting continues until the loop counter is one less than the actual length value (which starts its count with 1). SELECT.length CD-504 Part VI ✦ Appendixes multiple NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example The following statement toggles between single and multiple selections on a SELECT element object whose SIZE attribute is set to a value greater than 1: document.forms[0].mySelect.multiple = !document.forms[0].mySelect.multiple options[index] NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example See Listings 26-1 through 26-3 in the printed chapter for examples of how the options array references information about the options inside a SELECT element. options[index].defaultSelected NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example The following statement preserves a Boolean value if the first option of the SELECT list is the default selected item: var zeroIsDefault = document.forms[0].listName.options[0].defaultSelected SELECT.options[index].defaultSelected CD-505 Appendix F ✦ Examples from Parts III and IV options[index].index NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example The following statement assigns the index integer of the first option of a SELECT element named listName to a variable named itemIndex. var itemIndex = document.forms[0].listName.options[0].index options[index].selected NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example To accumulate a list of all items selected by the user, the seeList() function in Listing 26-4 systematically examines the options[index].selected property of each item in the list. The text of each item whose selected property is true is appended to the list. I add the “ \n “ inline carriage returns and spaces to make the list in the alert dialog box look nice and indented. If you assign other values to the VALUE attributes of each option, the script can extract the options[index].value property to collect those values instead. Listing 26-4: Cycling through a Multiple-Selection List <HTML> <HEAD> <TITLE>Accessories List</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function seeList(form) { var result = “” for (var i = 0; i < form.accList.length; i++) { if (form.accList.options[i].selected) { Continued SELECT.options[index].selected CD-506 Part VI ✦ Appendixes Listing 26-4 (continued) result += “\n “ + form.accList.options[i].text } } alert(“You have selected:” + result) } </SCRIPT> </HEAD> <BODY> <FORM> <P>Control/Command-click on all accessories you use: <SELECT NAME=”accList” SIZE=9 MULTIPLE> <OPTION SELECTED>Color Monitor <OPTION>Modem <OPTION>Scanner <OPTION>Laser Printer <OPTION>Tape Backup <OPTION>MO Drive <OPTION>Video Camera </SELECT> </P> <P><INPUT TYPE=”button” VALUE=”View Summary ” onClick=”seeList(this.form)”></P> </FORM> </BODY> </HTML> options[index].text NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example To demonstrate the text property of an option, Listing 26-5 applies the text from a selected option to the document.bgColor property of a document in the current window. The color names are part of the collection built into all scriptable browsers; fortunately, the values are case-insensitive so that you can capitalize the color names displayed and assign them to the property. SELECT.options[index].text CD-507 Appendix F ✦ Examples from Parts III and IV Listing 26-5: Using the options[index].text Property <HTML> <HEAD> <TITLE>Color Changer 1</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function seeColor(form) { var newColor = (form.colorsList.options[form.colorsList.selectedIndex].text) document.bgColor = newColor } </SCRIPT> </HEAD> <BODY> <FORM> <P>Choose a background color: <SELECT NAME=”colorsList”> <OPTION SELECTED>Gray <OPTION>Lime <OPTION>Ivory <OPTION>Red </SELECT></P> <P><INPUT TYPE=”button” VALUE=”Change It” onClick=”seeColor(this.form)”></P> </FORM> </BODY> </HTML> options[index].value NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Listing 26-6 requires the option text that the user sees to be in familiar, multiple- word form. But to set the color using the browser’s built-in color palette, you must use the one-word form. Those one-word values are stored in the VALUE attributes of each <OPTION> definition. The function then reads the value property, assigning it to the bgColor of the current document. If you prefer to use the hexadecimal triplet form of color specifications, those values are assigned to the VALUE attributes (<OPTION VALUE=”#e9967a”>Dark Salmon). SELECT.options[index].value CD-508 Part VI ✦ Appendixes Listing 26-6: Using the options[index].value Property <HTML> <HEAD> <TITLE>Color Changer 2</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function seeColor(form) { var newColor = (form.colorsList.options[form.colorsList.selectedIndex].value) document.bgColor = newColor } </SCRIPT> </HEAD> <BODY> <FORM> <P>Choose a background color: <SELECT NAME=”colorsList”> <OPTION SELECTED VALUE=”cornflowerblue”>Cornflower Blue <OPTION VALUE=”darksalmon”>Dark Salmon <OPTION VALUE=”lightgoldenrodyellow”>Light Goldenrod Yellow <OPTION VALUE=”seagreen”>Sea Green </SELECT></P> <P><INPUT TYPE=”button” VALUE=”Change It” onClick=”seeColor(this.form)”></P> </FORM> </BODY> </HTML> selectedIndex NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example In the inspect() function of Listing 26-7, notice that the value inside the options property index brackets is a reference to the object’s selectedIndex property. Because this property always returns an integer value, it fulfills the needs of the index value for the options property. Therefore, if you select Green in the pop-up menu, form.colorsList.selectedIndex returns a value of 1; that reduces the rest of the reference to form.colorsList.options[1].text, which equals “Green.” SELECT.selectedIndex CD-509 Appendix F ✦ Examples from Parts III and IV Listing 26-7: Using the selectedIndex Property <HTML> <HEAD> <TITLE>Select Inspector</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function inspect(form) { alert(form.colorsList.options[form.colorsList.selectedIndex].text) } </SCRIPT> </HEAD> <BODY> <FORM> <P><SELECT NAME=”colorsList”> <OPTION SELECTED>Red <OPTION VALUE=”Plants”><I>Green</I> <OPTION>Blue </SELECT></P> <P><INPUT TYPE=”button” VALUE=”Show Selection” onClick=”inspect(this.form)”></P> </FORM> </BODY> </HTML> size NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example The following statement sets the number of visible items to 5: document.forms[0].mySelect.size = 5 value NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ SELECT.value CD-510 Part VI ✦ Appendixes Example The function in Listing 26-6 that accesses the chosen value the long way can be sim- plified for newer browsers only with the following construction: function seeColor(form) { document.bgColor = form.colorsList.value } Methods item(index) namedItem(“optionID”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example The following statement assigns an OPTION element reference to a variable: var oneOption = document.forms[0].mySelect.namedItem(“option3_2”) Event handlers onChange NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Listing 26-8 is a version of Listing 26-6 that invokes all action as the result of a user making a selection from the pop-up menu. The onChange event handler in the <SELECT> tag replaces the action button. For this application — when you desire a direct response to user input — an appropriate method is to have the action trig- gered from the pop-up menu rather than by a separate action button. SELECT.onChange CD-511 Appendix F ✦ Examples from Parts III and IV Notice two other important changes. First, the SELECT element now contains a blank first option. When a user visits the page, nothing is selected yet, so you should present a blank option to encourage the user to make a selection. The func- tion also makes sure that the user selects one of the color-valued items before it attempts to change the background color. Second, the BODY element contains an onUnload event handler that resets the form. The purpose behind this is that if the user navigates to another page and uses the Back button to return to the page, the script-adjusted background color does not persist. I recommend you return the SELECT element to its original setting. Unfortunately, the reset does not stick to the form in IE4 and IE5 for Windows (although this problem appears to be repaired in IE5.5). Another way to approach this issue is to use the onLoad event handler to invoke seeColor(), passing as a parameter a reference to the SELECT element. Thus, if the SELECT element choice persists, the background color is adjusted accordingly after the page loads. Listing 26-8: Triggering a Color Change from a Pop-Up Menu <HTML> <HEAD> <TITLE>Color Changer 2</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function seeColor(list) { var newColor = (list.options[list.selectedIndex].value) if (newColor) { document.bgColor = newColor } } </SCRIPT> </HEAD> <BODY onUnload=”document.forms[0].reset()”> <FORM> <P>Choose a background color: <SELECT NAME=”colorsList” onChange=”seeColor(this)”> <OPTION SELECTED VALUE=””> <OPTION VALUE=”cornflowerblue”>Cornflower Blue <OPTION VALUE=”darksalmon”>Dark Salmon <OPTION VALUE=”lightgoldenrodyellow”>Light Goldenrod Yellow <OPTION VALUE=”seagreen”>Sea Green </SELECT></P> </FORM> </BODY> </HTML> SELECT.onChange . into the top text box: document.forms[0].output.cols = 30 And make the textarea one row deeper: document.forms[0].output.rows++ TEXTAREA.cols CD-503 Appendix F ✦ Examples from Parts III and IV Methods createTextRange() NN2. Listing 26-5 applies the text from a selected option to the document.bgColor property of a document in the current window. The color names are part of the collection built into all scriptable browsers;. selected item: var zeroIsDefault = document.forms[0].listName.options[0].defaultSelected SELECT.options[index].defaultSelected CD-505 Appendix F ✦ Examples from Parts III and IV options[index].index NN2