Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Adding Options to A Selectbox

    I currently have two selectbox, the first for categories and the second for subcategories. When an option from the category selectbox is chosen I would like the subcategory selectbox to be filled with options drawn from an array.

    The following code I have works for Chrome and Firefox but not in IE, I would appreciate any help to fix the code or new code which does a similar function.

    HTML:
    Code:
    <select size="9" id="category" name="category" onclick="return categoryChange();">
                        	<option>Antiques ></option>
                            <option>Art and Crafts ></option>
                        </select>
    
                        <select style="visibility:hidden" id="subcategory" name="subcategory" size="9">
                        </select>
    JAVASCRIPT:

    Code:
    function addOption(selectbox,text,value){
    			var optn = document.createElement("OPTION");
    			optn.text = text;
    			optn.value = value;
    			selectbox.options.add(optn);
    		}
    		
    		var antiques = new Array("Furniture","Ceramics","Glass");
    		var art = new Array("Drawings and Paintings","Photographs");
    		
    		
    		function categoryChange(){
    			
    			document.getElementById("subcategory").style.visibility = "visible";
    			document.getElementById("subcategory").innerHTML = "";
    			
    			
    			if(document.getElementById("category").value == "Antiques >"){
    				for (var i=0; i < antiques.length;++i){
    					addOption(document.myForm.subcategory, antiques[i], antiques[i]);
    				}		
    			}
    			else if(document.getElementById("category").value == "Art and Crafts >"){
    				for (var i=0; i < art.length;++i){
    					addOption(document.myForm.subcategory, art[i], art[i]);
    				}
    			}
                    }

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    You probably left out some html , but working
    with what you have provided I give you this ...

    Code:
    <html>
    <head>
    <title>Test JS</title>
    <script language="javascript"> 
    <!-- 
    function addOption(selectbox,text,value){
    			var optn = document.createElement("OPTION");
    			optn.text = text;
    			optn.value = value;
    			selectbox.options.add(optn);
    		}
    		
    		var antiques = new Array("Furniture","Ceramics","Glass");
    		var art = new Array("Drawings and Paintings","Photographs");
    		
    		
    		function categoryChange(){
    			
    			document.getElementById("subcategory").style.visibility = "visible";
    			document.getElementById("subcategory").innerHTML = "";
    			
    			
    			if(document.getElementById("category").options[document.getElementById("category").selectedIndex].text == "Antiques >"){
    				for (var i=0; i < antiques.length;++i){
    					addOption(document.getElementById("subcategory"), antiques[i], antiques[i]);
    				}		
    			}
    			else if(document.getElementById("category").options[document.getElementById("category").selectedIndex].text == "Art and Crafts >"){
    				for (var i=0; i < art.length;++i){
    					addOption(document.getElementById("subcategory"), art[i], art[i]);
    				}
    			}
                    }
    //--> 
    </script> 
    </head>
    <body>
    
    <select size="9" id="category" name="category" onclick="return categoryChange();">
                        	<option>Antiques ></option>
                            <option>Art and Crafts ></option>
                        </select>
    
                        <select style="visibility:hidden" id="subcategory" name="subcategory" size="9">
                        </select>
    
    </body>
    </html>

  • Users who have thanked DaveyErwin for this post:

    supersav144 (03-22-2011)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    DaveyErwin - <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning
    that you are probably looking at ancient and perhaps unreliable code.

    supersav144 - use the search feature of this forum for "multi-combo". You will find several good examples.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by Philip M View Post
    DaveyErwin - <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning
    that you are probably looking at ancient and perhaps unreliable code.

    supersav144 - use the search feature of this forum for "multi-combo". You will find several good examples.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Yes , I very much agree. I prefer to alter the original posters code as little as
    possible in the hope that the example will be clear to the original poster
    concerning their question rather than try to educate them beyond what
    they have requested and possibly beyond what they are currently
    prepaired t6o understand. Some are learning from ancient code which
    may prepare them to at some point grasp more modern concepts.

    Thank you for pointing this out to readers who are more capable,
    and thank you for your continuing efforts to improve the
    quality of this forum. Please, keep up the very good work
    you do here.

    Best regards.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by DaveyErwin View Post
    Thank you for pointing this out to readers who are more capable,
    and thank you for your continuing efforts to improve the
    quality of this forum. Please, keep up the very good work
    you do here.

    Best regards.
    You are too kind!

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by Philip M View Post
    You are too kind!
    No, not at all, any compliments or praise you recive
    are very well desireved because they are well earned.

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by supersav144 View Post
    ... I would appreciate any help to fix the code or new code which does a similar function.
    Another option

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <script type="text/javascript">
                var cats = [
                    ['mainCat1','m1sub1','m1sub2','m1sub3','m1sub4','m1sub5'],
                    ['mainCat2','m2sub1','m2sub2','m2sub3'],
                    ['mainCat3','m3sub1','m3sub2'],
                    ['mainCat4','m4sub1','m4sub2','m4sub3','m4sub4'],
                    ['mainCat5','m5sub1']
                ]
                function populateSubsSel(indx){
                    oSelSubs.options.length = 0;
                    if(indx == 0){return;}
                    oSelSubs.options.length = 0;
                    for(i=1; i < cats[indx-1].length; i++){
                        var newOpt = new Option(cats[indx-1][i],false,false);
                        oSelSubs.options[oSelSubs.options.length] = newOpt;
                    }
                }
                window.onload=function(){
                    var oSelMain = document.getElementsByName('selMain')[0];
                    oSelSubs= document.getElementsByName('selSubs')[0];
                    oSelMain.onchange = function(){populateSubsSel(this.selectedIndex);}
                    var newOpt = new Option('Choose a main category','',false,false);
                    oSelMain.options[oSelMain.options.length] = newOpt;
                    for(i=0; i < cats.length; i++){
                        var newOpt = new Option(cats[i][0],false,false);
                        oSelMain.options[oSelMain.options.length] = newOpt;
                    }
                }
            </script>
        </head>
        <body>
            <select name="selMain"></select>
            <select name="selSubs"></select>
        </body>
    </html>

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    As always, there are many ways to kill a cat!

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function setOptions(chosen) {
    var selbox = document.myform.opttwo;
     
    selbox.options.length = 0;
    if (chosen == "0") {
    selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
    }
    
    if (chosen == "1") {
    selbox.options[selbox.options.length] = new Option('Furniture','Furniture');
    selbox.options[selbox.options.length] = new Option('Ceramics','Ceramics');
    selbox.options[selbox.options.length] = new Option('Glass','Glass');
    }
    
    if (chosen == "2") {
    selbox.options[selbox.options.length] = new Option('Drawings and Paintings','Drawings and Paintings');
    selbox.options[selbox.options.length] = new Option('Photographs','Photographs');
    }
    
    }
    
    </script>
    
    </head>
    <body>
    
    <form name="myform">
    
    <select name="optone" 
    onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
    <option value="0" selected="selected"> Please select </option>
    <option value="1"> Antiques </option>
    <option value="2"> Arts and Crafts </option>
    </select>
    <br> <br>
    <select name="opttwo">
    <option value=" " selected="selected">Select a main category first</option>
    </select>
    <br><br>
    <input type="button" name="go" value="Click To Alert Value Selected" onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
    
    </form> 
    
    </body>
    </html>

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    yep, and I guess that is why the op said
    Quote Originally Posted by supersav144 View Post
    I would appreciate any help to fix the code or new code which does a similar function.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Well, he now has plenty of choice!

  • #11
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    yep, and that's the way it should be imo

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This worked an absolute treat, thank you very much! I do however have one added question which follows along the same lines...

    I am passing through the value which is selected for the category, some error checking is then completed and if an error is found it brings you back to the same page where I am displaying back the information entered. The problem is however that I can't seem to set the category select box selected item to whatever was passed through the first time.

    Here is the code I am using which again works in Chrome/Firefox but not IE. I feel the solution will be something similar to the previous but not entirely sure what...


    This is the javascript which is run onload of the page

    Code:
    var category;
    <?php
          print "category='".$postcategory."';\n";
    ?>
    				
    			
    if(category != ""){			
          document.getElementById("category").value = category;
    }

  • #13
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    You can append the relevant parameters to the url back to the original page and then set the inputs' default settings in the original page according to the paramaters sent back.

    Another option is to use session variables to store sent values and then use the session variables to set the default settings of elements in the original page.

  • #14
    New Coder
    Join Date
    Dec 2010
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I tried that using 'defaultSelected=.....;' but that didn't seem to work either for some reason.

  • #15
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Use a session cookie.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.


  •  

    Tags for this Thread

    Posting Permissions

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