dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Check if a Selected <option> is in an <optgroup> element.

  1. #1
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,811

    Check if a Selected <option> is in an <optgroup> element.

    So, here's the <select> element in question:

    HTML Code:
    <select name="parent_categ" id="SecCateg">
    	<option value="NULL">---</option>
    	<option value="Directions">Directions</option>
    	<optgroup id="OG_Directions" label="Directions">
    		<option value="DirectionsAbsolute">Absolute</option>
    		<option value="DirectionsRelative">Relative</option>
    	</optgroup>
    	<option value="Dream">Dream</option>
    	<optgroup id="OG_Dream" label="Dream">
    		<option value="DreamArrival">Arrival</option>
    		<option value="DreamLeaving">Leaving</option>
    		<option value="DreamUploads">Uploads</option>
    	</optgroup>
    	<option value="Furres" selected="selected">Furres</option>
    	<optgroup id="OG_Furres" label="Furres">
    		<option value="FurresActions">Actions</option>
    		<option value="FurresAppearance">Appearance</option>
    		<option value="FurresDreams">Dreams</option>
    		<option value="FurresGender">Gender</option>
    		<option value="FurresIdle">Idle</option>
    		<option value="FurresInteract">Interact</option>
    		<option value="FurresMessage">Message</option>
    		<option value="FurresMove">Move</option>
    		<option value="FurresOrient">Orient</option>
    		<option value="FurresPosture">Posture</option>
    		<option value="FurresSelect">Select</option>
    		<option value="FurresTurn">Turn</option>
    	</optgroup>
    	<option value="Locations">Locations</option>
    	<optgroup id="OG_Locations" label="Locations">
    		<option value="LocationsAbsolute">Absolute</option>
    		<option value="LocationsRegions">Regions</option>
    		<option value="LocationsRelative">Relative</option>
    	</optgroup>
    </select>
    I need to know how to tell if the selected <option> element is in an <optgroup> and, if so, which one.

  2. #2
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,811
    Actually, I may have it, though if there's a better way, let me know. In the code below, the variable "frm" refers to the form itself.

    PHP Code:
    var opt_parent frm.parent_categ.getElementsByTagName('option')[frm.parent_categ.selectedIndex].parentNode;

    if(
    opt_parent.nodeName=='OPTGROUP'){
    ...


  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,633
    using the W3Schools optgroup example and adding some JavaScript to it, this is one possible method of arriving at the answer...
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function process( obj ){
    	var optgrp = document.getElementsByTagName("OPTGROUP");
    	for(opts=0; opts<optgrp.length; opts++ ){
    
    		var groupData = optgrp[ opts ].getElementsByTagName("OPTION");
    		for( chk=0; chk<groupData.length; chk++ ){
    			if(  groupData[ chk ].value == obj.value ){
    					console.log(">>>> " + obj.value + " is in : " + optgrp[opts].label );
    			}
    		}
    	}
    }
    </script>
    </head>
    <body>
    <select name="cars" onchange="process( this );">
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
    </select>
    </body>
    </html>
    F12 opens the console, click on log, then try changing the select, the output in the console will output somehing like : mercedes is in : German Cars, you should be able to follow this and expand on the routine
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,802

    Lightbulb

    Expanding upon '\\.\'s idea, ,
    you could ask for one or more selections from each group.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <select name="cars" id="cars" multiple size="6">        <!-- multiple selection -->
    <!-- <select name="cars" onchange="process( this )" --> <!-- single selection -->
      <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
      </optgroup>
      <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </optgroup>
      <optgroup label="Japanese Cars">
        <option value="toyota">Toyota</option>
        <option value="nissan">Nissan</option>
        <option value="acura">Acura</option>
      </optgroup>
      <optgroup label="English Cars">
        <option value="rolls_royce">Rolls Royce</option>
        <option value="bmw">British Motor Works</option>
      </optgroup>
      <optgroup label="American Cars">
        <option value="chevrolet">Chevrolet</option>
        <option value="ford">Ford</option>
        <option value="chrysler">Chrysler</option>
      </optgroup>
    </select><br>
    Choose one or more <br>from each group (ctrl- or shift-)<br>
    <button onclick="showSelected('cars')">Selected</button>
    <pre id="debug"></pre>
    
    <script>
    function process( obj ){
      var optgrp = document.getElementsByTagName("OPTGROUP");
      for(opts=0; opts<optgrp.length; opts++ ){
        var groupData = optgrp[ opts ].getElementsByTagName("OPTION");
    // show last clicked
        for( chk=0; chk<groupData.length; chk++ ){
          if(  groupData[ chk ].value == obj.value ){
    //	console.log(">>>> " + obj.value + " is in : " + optgrp[opts].label );
    	document.getElementById('debug').innerHTML = ">>>> " + obj.value + " is in : " + optgrp[opts].label;
          }
        }
      }
    }
    
    function showSelected( IDS ){
      var obj = document.getElementById(IDS);
      var optgrp = obj.getElementsByTagName("OPTGROUP");
      for(opts=0; opts<optgrp.length; opts++ ){
        var groupData = optgrp[ opts ].getElementsByTagName("OPTION");
    // show items checked 
        for( chk=0; chk<groupData.length; chk++ ){
          if( groupData[ chk ].selected ){
    //	console.log(">>>> " + obj.value + " is in : " + optgrp[opts].label );
    	document.getElementById('debug').innerHTML += "\n>>>> " + groupData[ chk ].value + " is in : " + optgrp[opts].label;
          }
        }
      }
    }
    
    </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles