Change values of second drop down on change of first drop down

I have two drop downs that are already populated on load of the page, as the user can select from the choices already there. But what I want to happen is when the first drop down changes which is called continents and then it changes the values that are already in the second drop to the countries within that continent.

This is what I already got -

<form action="result.php" method="get" name="search" id="search">
<select name="hlist" class="hlist" id="wClient" onChange="bGroup();">
<option value="0">Select A Zone</option>
<?php 
$r=mysql_query("select DISTINCT Reg_Cntry, Desc_Cntry from tbl_countries order by Desc_Cntry");
while($q=mysql_fetch_assoc($r)){
?>
<option value="<?php echo $q['Reg_Cntry']?>"><?php echo $q['Desc_Cntry']?></option>
<?php } ?>
</select>

<select name="selectCountry" class="anywhere">
<option value="0">Select A Country</option>
<?php 
$r=mysql_query("select Id_Cntry, Nom_Cntry from tbl_countries order by Nom_Cntry");
while($q=mysql_fetch_assoc($r)){
?>
<option value="<?php echo $q['Id_Cntry']?>"><?php echo $q['Nom_Cntry']?></option>
<?php } ?>
</select>

<script>
function bGroup(){
val1 = $("#wClient").val();
window.alert(val1);
return val1;
}
</script>

What Im unsure of doing is how to get the val1 to the drive the chane in the php so that the dropdown changes to show its new values according to the value of val1 which is an ID.

with the current code that’s not possible to do.

the usual way one would go is not to populate the second dropdown and instead, when a continent is chosen to make an AJAX request that fetches all countries of that continent and build the second dropdown’s options dynamically from that.

Hi,

Ye I thought so, as couldn’t work out how I was going to refresh to draw the next content in.

OK thanks, back to the drawing board.

There is no reason you can’t populate it though. You are going to change all the values in it whenever something from the first dropdown is selected anyway so it makes no difference whether it is already populated or it gets populated from a selection in the first dropdown and then gets repopulated by them changing their mind as to which entry in the first dropdown they select.

Take a look at http://www.felgall.com/jstip120.htm - the script there for populating the second dropdown doesn’t care whether it was previously populated or not.

Hi felgall,

I just followed your link to your fix so thank you for that, but from what I can see your hard coding the drop downs before showing them, is that right?

Where as what I need is for both drop downs to be dynamically filled from a MySQL database, is this still possible.

So in my case the first drop down will always contain all the regions on the planet, and at first glance the second drop down contains every country we have a hotel in. But if then the user chooses Europe, the second drop down changes to only show European cities, and so on.

Cheers

I suppose what could happen is that I create a set of dropdowns according to the id number of the countries, so there a set of prepared drop downs each containing the countries within the region, then they called as they needed.

Not sure how to accomplish that though with your jquery in the link.

Is it an option you think?

Yes. Instead of reading the list from a specific position in the information already loaded in the script, you’d send that position to the server to retrieve the required data from there instead.

Hi felgall, do you mean using AJAX and make a call to a php page to retrieve the data.

Could you start me off, im not 100% sure.

Another thing that has to be done, is that the second drop down needs also to be populated with everything on load, and then it only changes if the first drop down is changed, otherwise the user can go straight to the second drop down and pick a choice from there on its own.

The first drop down contains all the continents, the second drop down on page load contains all the countries. So if a certain continent is chosen then the second drop down changes to only show the countries of that continent.

So using your script the second drop down countries are separated by the id associated by each continent, and that’s where im struggling.

This is the start of my form, which is pretty standard

<select name="hlist" class="hlist" id="optone">
<option value="0">Select A Zone</option>
<?php 
$r=mysql_query("select DISTINCT Reg_Cntry, Desc_Cntry from tbl_countries order by Desc_Cntry");
while($q=mysql_fetch_assoc($r)){
?>
<option value="<?php echo $q['Reg_Cntry']?>"><?php echo $q['Desc_Cntry']?></option>
<?php } ?>
</select>

<select name="selectCountry" class="anywhere" id="opttwo">
<option value="0">Select A Country</option>
<?php 
$r=mysql_query("select Id_Cntry, Nom_Cntry from tbl_countries order by Nom_Cntry");
while($q=mysql_fetch_assoc($r)){
?>
<option value="<?php echo $q['Id_Cntry']?>"><?php echo $q['Nom_Cntry']?></option>
<?php } ?>
</select>

So all that works fine, whats confusing me is how on change of the first drop down it takes the value and passes it through your script to then get the countries it needs from the database to populate the second drop down.

Hi Felgall,

I can see how it works now having got it working, the second drop down is looking for the values, 0,1,2 from the values of the first drop down which is great, as its using the id.

So as you have laid out the second drop down options as below

       [   ['first choice - option one', 'oneone'],
          ['first choice - option two', 'onetwo']  ],

      [   ['A'],
          ['second choice - A option one', 'twoAone'],
          ['second choice - A option two', 'twoAtwo'],
          ['B'],
          ['second choice - option B one', 'twoBone'],
          ['second choice - option B two', 'twoBtwo']  ],

      [   ['third choice - option one', 'threeone'],
          ['third choice - option two', 'threetwo']  ]

What I’m not sure of is how do I loop through the database to gather out the countries associated with each of those id values, and then list them within

var opts = [

[ [‘America’, ‘1’],
[‘Canada’, ‘2’] ]
[ [‘Spain’, ‘10’],
[‘France’, ‘12’] ]
]
etc

OK it seems to be working now but for 1 problem, the second drop down is looking at the first value being 0 but I start my id’s a 1, so its always out by one.

How can I change it so that the second drop down list value starts at 1 rather than 0.

This is what I have.

 <form action="result.php" method="get" name="search" id="search">
 <select name="hlist" class="hlist" id="optone">
 <option value="0">Select A Zone</option>
 <?php 
 $r=mysql_query("select DISTINCT Reg_Cntry, Desc_Cntry from tbl_countries order by Desc_Cntry");
 while($q=mysql_fetch_assoc($r)){
 ?>
 <option value="<?php echo $q['Reg_Cntry']?>"><?php echo $q['Desc_Cntry']?></option>
 <?php } ?>
 </select>
 <select name="selectCountry" class="anywhere" id="opttwo">
 <option value="0">Select A Country</option>
 <?php 
 $r=mysql_query("select Id_Cntry, Nom_Cntry from tbl_countries order by Nom_Cntry");
 while($q=mysql_fetch_assoc($r)){
 ?>
 <option value="<?php echo $q['Id_Cntry']?>"><?php echo $q['Nom_Cntry']?></option>
 <?php } ?>
 </select>
 </form>

<script>
(function() {
var opts = [
<?php 
$r=mysql_query("select DISTINCT Reg_Cntry, Desc_Cntry from tbl_countries ORDER BY Desc_Cntry");
while($q=mysql_fetch_assoc($r)){ ?>
[
<?php	$x=mysql_query("select Id_Cntry, Nom_Cntry, Reg_Cntry from tbl_countries WHERE Reg_Cntry = ".$q ['Reg_Cntry']." ");
while($t=mysql_fetch_assoc($x)){ ?>
['<?php echo $t['Nom_Cntry']?>', '<?php echo $t['Id_Cntry']?>'],
<?php } ?>  
],
<?php } ?> 
];

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.