By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 1,985 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

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

P: 21
hi all,
i had two drop down boxes
on the selection of one item in the first drop down box
the related items should be changed in the second one
can any one please suggest me towards the solution

thanks in advance
kash
Sep 22 '08 #1
Share this Question
Share on Google+
10 Replies


P: 93
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>Action</span></td>
<td><select id="combo1" name="combo2" size="1" class="optional" onchange="changeCombo2(this);">
<option value="condition 1">condition 1</option>
<option value="condition 2">condition 2</option></select></td>

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

Expand|Select|Wrap|Line Numbers
  1. function changeCombo2(that){
  2. var combo2= document.getElementById("combo2");
  3. myobj=combo2.parentNode;//This could vary as per your DOM structure
  4. if (that.value=='condition 1'){
  5. 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>';
  6. }
  7. else if(that.value=='condition 2'){
  8. 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>';
  9.  
  10. }
  11. }

In any concern please let me know......
Sep 22 '08 #2

P: 21
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
Sep 22 '08 #3

P: 21
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
Sep 22 '08 #4

Dormilich
Expert Mod 5K+
P: 8,639
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
Sep 22 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Threads merged. Please do not double post your questions.

Moderator.
Sep 22 '08 #6

P: 21
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. </head>
  4.  
  5. <body>
  6.  
  7. FIRST COMBO BOX:-
  8. -------------------------------
  9.  
  10. <select name="country">
  11. <option selected>---Select1-------------</option>
  12. <option>India</option>
  13. <option>Australia</option>
  14. . . . . . .
  15. </select>
  16.  
  17. SECOND COMBO BOX:-
  18. --------------------------------------
  19.  
  20. Related to first item of first combo
  21. -------------------------------------------------
  22. <select name="state">
  23. <option selected>...select......</option>
  24. <option>Delhi</option>
  25. <option>AP</option>
  26. .........
  27. </select>
  28.  
  29. Related to second item of first combo
  30. ------------------------------------------------------
  31. <select name="state">
  32. <option selected>....select...</option>
  33. <option>California</option>
  34. <option>.....</option>
  35. .......
  36. </select>
  37.  
  38.  
  39.  
  40. <table id="list" style="display:none;">
  41. <tr>
  42. <td>THIS IS SOME INFO</td>
  43. </tr>
  44. </table>
  45.  

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
Sep 22 '08 #7

acoder
Expert Mod 15k+
P: 16,027
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.
Sep 22 '08 #8

P: 21
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
Sep 23 '08 #9

P: 93
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>Action</span></td>
<td><select id="combo1" name="combo1" size="1" class="optional" onchange="changeCombo2(this);">
<option value="condition 1">Proceed</option>
<option value="condition 2">Reject</option></select></td>

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

</body></html>[/HTML]
Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2.  
  3. function changeCombo2(that){
  4. var combo2= document.getElementById("combo2");
  5. myobj=combo2.children;//This could vary as per your DOM structure
  6. if (that.value=='condition 1'){
  7. myobj[0].firstChild.nodeValue='no Proceed';
  8. myobj[1].firstChild.nodeValue='no Reject';
  9. }
  10. else if(that.value=='condition 2'){
  11. myobj[0].firstChild.nodeValue='Why Proceed';
  12. myobj[1].firstChild.nodeValue='Why Reject';
  13.  
  14. }
  15. }
  16. </script>
Sep 23 '08 #10

kryptonova
P: 4
Is this what you want? (Javascript)

http://www.plus2net.com/javascript_t...pdown-list.php

For server-side (using PHP):

http://www.plus2net.com/php_tutorial..._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.
Sep 23 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.