Drop down boxes: show related items in second box on selection in first

**Rsmastermind** · Sep 22 '08, 09:23 AM

You can see a similar threads where there was 3 different dropdown and the case was similar.
But anyways I am giving you the solution for this.

[HTML]<td><span>Actio n</span></td>
<td><select id="combo1" name="combo2" size="1" class="optional " onchange="chang eCombo2(this);" >
<option value="conditio n 1">condition 1</option>
<option value="conditio n 2">condition 2</option></select></td>

<td><span>No Action</span></td>
<td><select id="combo2" name="combo2" size="1" class="optional " onchange="chang eCombo2(this);" >
<option value="on condition 1">on condition 1</option>
<option value="on condition 2">on condition 2</option></select></td>[/HTML]

Code:

function changeCombo2(that){
var combo2= document.getElementById("combo2");
myobj=combo2.parentNode;//This could vary as per your DOM structure
if (that.value=='condition 1'){
myobj.innerHTML='<select id="combo2" name="combo2" size="1" class="optional" ><option value="no Proceed">no Proceed</option><option value="no reject">no Reject</option></select>';
}
else if(that.value=='condition 2'){
myobj.innerHTML='<select id="combo2" name="combo2" size="1" class="optional" ><option value="Why Proceed">Why Proceed</option><option value="Why reject">Why Reject</option></select>';

}
}

In any concern please let me know......

**kashhere** · Sep 22 '08, 09:58 AM

hi thanq
but actually

the elements in the first combo box should be constant
for example if i had keep the first combo box as country then i will display the countries list in the first combo box
on selection of particular country i need to display the states under that country in the second drop down

please guide me towards the solution

thank you
kash

**kashhere** · Sep 22 '08, 10:17 AM

help on Drop Down Boxes

Hi every one
i need urgent help on drop down boxes

actually i had two drop down boxes
like country and states

when i had selected a country then the respective states should be displayed in the second drop down boxes and when i have selected a particular state in that then the info which is present in a table should be displayed

can any one please suggest me towards the solution
its a bit urgent

thank you

**Dormilich** · Sep 22 '08, 11:24 AM

this depends a bit on where you store all the data. If it's not too much to load, you may hard code it into the script, otherwise (e.g. data stored in a database) you probably should go for ajax.

regards

**acoder** · Sep 22 '08, 12:06 PM

Threads merged. Please do not double post your questions.

Moderator.

**kashhere** · Sep 22 '08, 05:15 PM

Code:

<html>
<head>
</head>

<body>

FIRST COMBO BOX:-
-------------------------------

<select name="country">
<option selected>---Select1-------------</option>
<option>India</option>
<option>Australia</option>
. . . . . .
</select>

SECOND COMBO BOX:-
--------------------------------------

Related to first item of first combo
-------------------------------------------------
<select name="state">
<option selected>...select......</option>
<option>Delhi</option>
<option>AP</option>
.........
</select>

Related to second item of first combo
------------------------------------------------------
<select name="state">
<option selected>....select...</option>
<option>California</option>
<option>.....</option>
.......
</select>



<table id="list" style="display:none;">
<tr>
<td>THIS IS SOME INFO</td>
</tr>
</table>

Actually what i need is i had 2 r 3 tables which are invisible
when i select one item in the second combo box then the table related to that will be displayed
Means here when i select the option california then the table related to that should be displayed
can any one please guide me towards the solution

thanks in advance
kash

**acoder** · Sep 22 '08, 05:30 PM

kashhere, please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future. Thanks.

Moderator.

**kashhere** · Sep 23 '08, 03:03 AM

sry this will not be repeated
next time i will follow your instructins
can you please guide me towards the solution
its a bit urgent

thank you

kash

**Rsmastermind** · Sep 23 '08, 06:18 AM

Somehow I had done the mistake I had written id for the both as same.

You just try this code this is tried and executed sucessfully

[HTML]<html><body>
<td><span>Actio n</span></td>
<td><select id="combo1" name="combo1" size="1" class="optional " onchange="chang eCombo2(this);" >
<option value="conditio n 1">Proceed</option>
<option value="conditio n 2">Reject</option></select></td>

<td><span>No Action</span></td>
<td><select id="combo2" name="combo2" size="1" class="optional " >
<option value="conditio n 1">Proceed</option>
<option value="conditio n 2">Reject</option></select></td>

</body></html>[/HTML]

Code:

<script type='text/javascript'>

function changeCombo2(that){
var combo2= document.getElementById("combo2");
myobj=combo2.children;//This could vary as per your DOM structure
if (that.value=='condition 1'){
myobj[0].firstChild.nodeValue='no Proceed';
myobj[1].firstChild.nodeValue='no Reject';
}
else if(that.value=='condition 2'){
myobj[0].firstChild.nodeValue='Why Proceed';
myobj[1].firstChild.nodeValue='Why Reject';

}
}
</script>

**kryptonova** · Sep 23 '08, 06:33 AM

Is this what you want? (Javascript)

JavaScript dynamic drop down list, selection of second html list based on first value

http://www.plus2net.com/javascript_tutorial/dropdown-list.php

For server-side (using PHP):

PHP dynamic population of drop down list based on selection of one list

http://www.plus2net.com/php_tutorial/php_drop_down_list.php

I had to use the second link. But, please make sure user doesn't tamper the URL as this approach uses GET method.

Drop down boxes: show related items in second box on selection in first

Drop down boxes: show related items in second box on selection in first

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment