- S election lists — whether in the form of pop-up menus or scrolling lists — are space-saving form elements in HTML pages. - Select Object. - options[i].defaultSelected options[i].index. - options[i].selected options[i].text. - options[i].value type. - Creating a select object:. - <OPTION [SELECTED] [VALUE=”string”]>listItem […<OPTION [VALUE=”string”]>listItem]. - Accessing select object properties:. - [window.] document.formName.listName.options[index].property [window.] document.forms[index].listName.options[index].property. - Some properties of the object apply to the entire object, whereas other properties pertain only to a single item in the list (each item is called an option). - For example, you can extract the number (index) of the currently selected option in the list — a property of the entire selection object. - <SELECT>...</SELECT>. - tag are additional tags for each option to be displayed in the list. - <OPTION>Green. - <OPTION>Blue. - The formatting of the tags in the HTML document is not critical. - The number indicates how many options will be visible in the list without scrolling — how tall the box will be, measured in lines.. - Significant differences exist in the way each GUI platform presents pop-up menus. - Because each browser relies on the operating system to display its native pop-up menu style, considerable differences exist among the OS platforms in the size of a given pop-up menu. - What fits nicely within a standard window width of one OS may not fit in the window of another OS. - With object positioning in Navigator 4 and Internet Explorer 4, you can align one edge of multiple items, but you cannot control, for example, the precise width of a select list or the size of the text in the list.. - versions of the select object. - To switch on this capability for a select object, include the MULTIPLE attribute constant in the definition.. - tag plus the text as you want it to appear in the list. - If you want a pop-up list to show a default selection when the page loads, you must attach a SELECTED attribute to that item’s <OPTION>. - As with radio buttons, this value can be text other than the wording displayed in the list. - If you prefer to delay any action until other settings are made, omit an onChange= event handler in the select object, but be sure to create a button that lets users initiate whatever action requires those settings.. - Some of this flexibility is rather straightforward, such as changing the selectObj.options[i].text property to alter the display of a single option entry. - The situation gets tricky, though, when the number of options in the select object changes. - selectObj.options[2. - After this statement, selectObj.options.length equals 4.. - selectObj.options.length = 3. - selectObj.options.length = 0. - Text to be displayed in the option. - Contents of the option’s value property. - selectObj.options[4. - To demonstrate all of these techniques, Listing 24-1 lets you 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. - listObj.options[i].text = plainList[i]. - listObj.options[i].text = hardList[i]. - listObj.options[i. - listObj.options[0].selected = true if (navigator.appName. - <OPTION>magenta. - <OPTION>yellow. - Then 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.. - 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. - In the meantime, the function finds the selected language radio button and zeros out the select object entirely. - Because none of these new options has other properties set (such as which one should be selected by default), the function sets that property of the first item in the list.. - But rather than having to reference the options array to determine its length, the select object has its own length property, which you use to find out how many items are in the list. - This value is the number of options in the object (starting with 1). - A select object’s name property is the string you assign to the object by way of its NAME attribute in the object’s <SELECT>. - To enable you to inspect how JavaScript sees the selection object defined in the body, the alert dialog box reveals the definition data. - alert(form.colorsList.options). - Related Items: All options[index].property items.. - options[index].defaultSelected. - isDefault = document.forms[0].listName.options[0].defaultSelected Related Items: options[index].selected property.. - options[index].index. - itemIndex = document.forms[0].listName.options[0].index Related Items: options[] property.. - options[index].selected. - As mentioned earlier in the discussion of this object, better ways exist for determining which option a user has selected from a list than looping through all options and examining the selected property. - Therefore, your script needs to look at the true or false values of the selected property for each option in the list and determine what to do with the text or value data.. - To accumulate a list of all items selected by the user, the seeList() function in Listing 24-3 systematically examines the options[index].selected property of each item in the list. - I added the “\n “ inline carriage returns and spaces to make the list in the alert dialog box look nice and indented. - options[index].value property to collect those values instead.. - if (form.accList.options[i].selected). - form.accList.options[i].text. - <OPTION>Modem. - <OPTION>Scanner. - Related Items: options[index].text property. - options[index].value property. - options[index].text. - The text property of an option is the text of the item as it appears in the list. - But if your processing requires other strings associated with each option, assign a VALUE attribute in the definition and extract the options[index].value property (see Listing 24-5).. - Listing 24-4: Extracting the options[index].text Property. - newWindow.document.write(“<HTML><BODY BGCOLOR. - newWindow.document.write(“<H1>Color Sampler</H1></BODY></HTML>. - <OPTION>Red. - Related Items: options[index].value. - options[index].value. - In many instances, the words in the options list appear in a form that is convenient for the document’s users but inconvenient for the scripts behind the page. - Rather than set up an elaborate lookup routine to match the selectedIndex or options[index].text values with the values your script needs, an easier technique is to store those values in the VALUE attribute of each <OPTION>. - definition of the select object. - You can store any string expression in the VALUE attributes. - Those one-word values are stored in the VALUE attributes of each <OPTION>. - The function then extracts the value property, assigning it to the bgColor of the document in the smaller window. - Listing 24-5: Using the options[index].value Property. - Related Items: options[index].text. - When a user clicks on a choice in a selection list, the selectedIndex property changes to a number corresponding to that item in the list. - To examine its selected property, rather than cycling through every option in a repeat loop, use the selectedIndex property to fill in the index value for the reference to the selected item. - Note, however, that when the select object is a multiple-style, the selectedIndex property value reflects the index of the topmost item selected in the list.. - In the inspect() function of Listing 24-6, notice that the value inside the options[] property index brackets is a reference to the object’s selectedIndex property. - Therefore, if Green is selected in the pop-up menu, form.colorsList.selectedIndex returns a value of 2. - that reduces the rest of the reference to form.colorsList.options[2].text , which equals “Green.”. - The method activates the object, but does not, in the case of a pop-up list, pop up the list for the user. - These methods work identically with their counterparts in the text object.. - I removed the action button and placed the onChange= event handler in the. - A bug in the Windows versions of Navigator 2 causes the onChange= event handler in select objects to fail unless the user clicks outside the select object. - The Browse button leads to an open file dialog box (in the local operating system’s interface vernacular) where a user can select a file. - depending on the operating system) appears in the fileUpload object’s field
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt