PDA

Click to See Complete Forum and Search --> : combo box

bmarzouk
Mar 29th, 2002, 06:25 PM
Hello,
I have two combo boxes (<SELECT>) in an HTML page, where the first combo is
the parent of the second. When the user select an item in the first combo box,
the second one will be filled with other values that depend on the value of the
first combo box. Ofcourse these values are given from database.
I have two solutions for this problem:

The first is that when the user select an option from the first value, The current
page will redirect to itself with this option value and get the related options values
for the second combo box to fill it, but I think that will be slow while it is easier than the second solution.

The second is to fill an array with all options values of the second combo box
and use JavaScript to fill the second combo box from this array.

Could any one help me with code for the second solution.
I need to know how to clear the combo box, how to fill it again and so on using JavaScript.

Thank you
veryjonny
Mar 30th, 2002, 01:45 AM
I guess you need this:


<script language="javascript">
function CallFillList(theForm)
{
//array to save your data
var subcat = new Array(6);
subcat[0] = new Array(10);
subcat[1] = new Array(10);
subcat[2] = new Array(10);
subcat[3] = new Array(10);
subcat[4] = new Array(10);
subcat[5] = new Array(10);

//fill in the values
subcat[1][0] = "OneZero";
subcat[1][1] = "Oneone";
subcat[1][2] = "OneTwo";
subcat[1][3] = "OneThree";
subcat[1][4] = "OneFour";
subcat[1][5] = "OneFive";
subcat[1][6] = "OneSix";
subcat[1][7] = "OneSeven";
subcat[1][8] = "OneEight";
subcat[1][9] = "OneNine";



subcat[2][0] = "TwoZero";
subcat[2][1] = "Twoone";
subcat[2][2] = "TwoTwo";
subcat[2][3] = "TwoThree";
subcat[2][4] = "TwoFour";
subcat[2][5] = "TwoFive";
subcat[2][6] = "TwoSix";
subcat[2][7] = "TwoSeven";
subcat[2][8] = "TwoEight";
subcat[2][9] = "TwoNine";
//fill in for the others
//change th evalues in the other select
alert("Will work only for the first two numbers, fill in the values for other values in the array");
for(ctr=0;ctr < subcat[theForm.myselect.selectedIndex +1].length;ctr++)
{
theForm.SubCategory.options[ctr] = new Option(subcat[theForm.myselect.selectedIndex +1][ctr]);
}


}
</script>
</HEAD>
<BODY>
<form action="sele.asp" method=post name=mainform>
<select name="myselect" onchange="CallFillList(document.mainform);">
<option value="1" >one</option>
<option value="2" >two</option>
<option value="3" >three</option>
<option value="4" >four</option>
<option value="5" >five</option>
<option value="6" >six</option>
</select><br>

<select name="SubCategory" >
</select>
<br>

<input type=submit name=submit value=submit>

</form>


:)
bmarzouk
Mar 30th, 2002, 03:36 AM
Thank you "veryjonny",
Your code did the job, but for the second combo, the value of each <option> item in the <select> is the same as its caption.
Could you tell me how to set the value of an item to be different of its caption using JavaScript.

Thank you for you time
veryjonny
Apr 1st, 2002, 12:20 AM
Sorry for the late reply.
Originally posted by bmarzouk
but for the second combo, the value of each <option> item in the <select> is the same as its caption.
Could you tell me how to set the value of an item to be different of its caption using JavaScript.

Thank you for you time


try this:


Change this line :
theForm.SubCategory.options[ctr] = new Option(subcat[theForm.myselect.selectedIndex +1][ctr]);

to:
theForm.SubCategory.options[ctr] = new Option(subcat[theForm.myselect.selectedIndex +1][ctr],"Whatever Value");




Try it, I think it will work.

:)