CodingForums.com - Adding Options to A Selectbox

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Adding Options to A Selectbox (http://www.codingforums.com/showthread.php?t=221906)

supersav144

03-21-2011 03:26 AM

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]);

                                }

                        }

                }

DaveyErwin

03-21-2011 04:54 AM

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>

Philip M

03-21-2011 08:31 AM

DaveyErwin - <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The  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.

DaveyErwin

03-21-2011 08:42 AM

Quote:

Originally Posted by Philip M (Post 1068016)

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.

Philip M

03-21-2011 08:46 AM

Quote:

Originally Posted by DaveyErwin (Post 1068019)

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! :)

DaveyErwin

03-21-2011 08:54 AM

Quote:

Originally Posted by Philip M (Post 1068020)

You are too kind! :)

No, not at all, any compliments or praise you recive
are very well desireved because they are well earned.

bullant

03-21-2011 10:22 AM

Quote:

Originally Posted by supersav144 (Post 1067953)

... 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>

Philip M

03-21-2011 12:29 PM

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>

bullant

03-21-2011 12:33 PM

yep, and I guess that is why the op said

Quote:

Originally Posted by supersav144 (Post 1067953)

I would appreciate any help to fix the code or new code which does a similar function.

Philip M

03-21-2011 12:35 PM

Well, he now has plenty of choice! :)

bullant

03-21-2011 12:58 PM

yep, and that's the way it should be imo :)

supersav144

03-22-2011 01:42 AM

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;

}

bullant

03-22-2011 05:48 AM

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.

supersav144

03-22-2011 09:08 AM

I tried that using 'defaultSelected=.....;' but that didn't seem to work either for some reason.

Philip M

03-22-2011 09:24 AM

Use a session cookie.

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

All times are GMT +1. The time now is 05:46 PM.