|
-
Mar 29th, 2002, 07:25 PM
#1
Thread Starter
Addicted Member
combo box
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
-
Mar 30th, 2002, 02:45 AM
#2
PowerPoster
hi
I guess you need this:
Code:
<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>
-
Mar 30th, 2002, 04:36 AM
#3
Thread Starter
Addicted Member
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
-
Apr 1st, 2002, 01:20 AM
#4
PowerPoster
hi
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:
Code:
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.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote