• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 13. Working with Text and Select... > Using the <OPTGROUP> Element

Using the <OPTGROUP> Element

Here’s an example using the <OPTGROUP> element. In this case, the code will display three labels to divide a list of <OPTION> elements into groups. You can reset those labels at any time in code, just by assigning text to the label property of the <OPTGROUP> elements. Here’s how you can alternate between the old labels and new labels when the user clicks buttons (you’ll need NS6+ if using Netscape Navigator here):

(Listing 13-12.html on the web site)

<HTML> 
    <HEAD> 
        <TITLE>Using Option Groups</TITLE> 
        <SCRIPT LANGUAGE="JavaScript"> 
            <!--
            function oldLabels()
					{
					var optionGroupElements = document.getElementsByTagName("OPTGROUP")
					optionGroupElements[0].label = "Old Label 1"
					optionGroupElements[1].label = "Old Label 2"
					optionGroupElements[2].label = "Old Label 3"
					}
					function newLabels()
					{
					var optionGroupElements = document.getElementsByTagName("OPTGROUP")
					optionGroupElements[0].label = "New Label 1"
					optionGroupElements[1].label = "New Label 2"
					optionGroupElements[2].label = "New Label 3"
					}
					function displaySelection()
					{
				document.getElementById("div1").innerHTML = "The value of the item you selected is: " +
				document.form1.select1.options[document.form1.select1.selectedIndex].value
					} 
            //--> 
        </SCRIPT> 
    </HEAD> 

    <BODY> 
        <H1>Using Option Groups</H1> 
        <FORM NAME="form1"> 
            <SELECT NAME="select1" ONCHANGE="displaySelection()">
					<OPTGROUP LABEL="Old Label 1">
					<OPTION value="1:1">Group 1 Item 1
					<OPTION value="1:2">Group 1 Item 2
					<OPTION value="1:3">Group 1 Item 3
					</OPTGROUP>
					<OPTGROUP LABEL="Old Label 2">
					<OPTION value="2:1">Group 2 Item 1
					<OPTION value="2:2">Group 2 Item 2
					<OPTION value="2:3">Group 2 Item 3
					</OPTGROUP>
					<OPTGROUP LABEL="Old Label 3">
					<OPTION value="3:1">Group 3 Item 1
					<OPTION value="3:2">Group 3 Item 2
					<OPTION value="3:3">Group 3 Item 3
					</OPTGROUP>
					</SELECT> 
            <BR> 
            <INPUT TYPE="BUTTON" VALUE="New labels" ONCLICK="newLabels()"> 
            <INPUT TYPE="BUTTON" VALUE="Old labels" ONCLICK="oldLabels()"> 
        </FORM> 
        <DIV ID="div1"></DIV> 
    </BODY> 
</HTML> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint