Three interlinked dropdown list using JQuery

subhendu
09:03:16
Data taken from MySQL table. Front end is managed by Jquery. There are three dropdown list boxes to display country > State > City.

On selection of City the form submits data to a new page.

Check tutorial on three drop down list box here

Your views please.
bond1126
09-06-2016
How to pull data from multiple tables?

For example,

I have tbl_city1 and tbl_city2

When the Orange county is selected it will show all the cities from tbl_city1
When the Monroe county is selected it will show all the cities from tbl_city2

Thanks.
subhendu
09-07-2016
Here you need not Link tables to get data from both tables, a simple switch condition check will tell which table to use.

switch ($country)
{
case "Orange":
$table_name="tbl_city1";
break;

case "Monroe":
$table_name="tbl_city2";
break;
}

$query="select cities from $table_name where ....";

You can add more cases to switch condition if you have more tables.
bond1126
09-07-2016
Currently the code looks like this:

$q_county="select city_id,city from tbl_city1 where ";

if(strlen($county_id) > 0){

$q_county= $q_county . " county_id = :county_id ";

}

Where do I put the switch statement?
JamWales
07-29-2017
Hi - great tutorial, works a treat :)

Is there a way, when the page first loads, to automatically set a 1st dropdown to default value, with the 2nd and 3rd dropdowns being automatically populated accordingly? Once loaded, should the user choose, they can change the values in the dropdowns as per your design.

Many thanks.
subhendu
07-30-2017
To make any country selected in first dropdown list add this line just after document.ready() like this
$(document).ready(function() {
$("#country_code").val('GBR'); // This will make Great Britain as default selection
.....
..


But that is not enough .. The second list must show states of Great Britain. For this we need to trigger the change function of 2nd dropdown list . This part is also to be executed once one country is set by default.

$(function () {
$("#country_code").change();
});


Now here is the full code to be added at top to document.ready()

$(document).ready(function() {
$("#country_code").val('GBR');
$(function () {
$("#country_code").change();
});

......
...... rest of your code goes here.
......
subhendu
07-30-2017
Pre-selection of country
Say some one has clicked a country name and you want to show this three dropdown list. Here visitor need not select the same country again from the first list. You can collect the country code ( or country name ) from the query string and the pass the value to JQuery part to keep the same country as default selected.
three-list.php?country=CAN

Here three-list.php is the page showing three dropdown list to the users. You can collect the list like this ( PHP script here )
$country=$_GET['country'];

Now you can pass the $country variable data by one hidden field of the form
<input type=hidden id=sel_country name=sel_country value=$country>

Then create the JQury variable like this.
var sel_country=$('#sel_country').val();

Now this varaible sel_country can be used in above code to set the value from default selected country.
$("#country_code").val(sel_country);
subhendu
07-30-2017
Click the link here : Welcome to India
SowmyaSP
11-21-2017
Hi I am Using Your Three dropdown List script I want retrieve all the column details including country state city. How Can I able to achieve this Please let me know
subhendu
11-21-2017
Select Country then State then city , once you submit the form next page all details are available. Try the
demo.
Please Login to post your reply or start a new topic