Three interlinked dropdown listbox using Ajax & PHP

By using Ajax we can manage the options of the dropdown list box without reloading the page. This way we can provide better user experience than reloading the page each time the user select one drop box.

You must read how options are added to a listbox in JavaScript. You can check how a default option is kept selected while adding options.

The basic two dropdown list ( ajax ) already explained here. We will further extend this script to make it three linked dropdown listbox.

For our example we will use three list boxes, first one will list country, second one will list state and third one will list city. The student table is extended to add these three fields to identify each record. All listbox options ( data ) taken from a single table. Check the sql dump file in your download zip file to create your table .

By using JQuery we can create three linked dropdown list. This script is easy to understand and easy to modify.
Tutorial with Demo on using Three linked dropdown list - JQuery

First dropdown list: Country

We will read the data from table by using distinct query. This display the record by using a foreach loop. Here we will use records as options.
Select Country<br><select name=country id='s1' onchange=ajaxFunction('s1');>
<option value=''>Select One</option>
<?Php
require "config.php";// connection to database 
$sql="select distinct country from student5 ";
foreach ($dbo->query($sql) as $row) {
echo "<option value=$row[country]>$row[country]</option>";
}
?>
</select>
Here we used sql distinct command to collect unique country name from the records

Second dropdown list : State

By default this will not display any data and after selection of country code from country dropdown list, the same data will be posted back to ajaxdd3ck.php page. The matching state list based on the selection of country will be populated on state drop down list.
for(j=document.myForm.state.options.length-1;j>=0;j--)
{
document.myForm.state.remove(j);
}

var state1=myObject.value.state;
for (i=0;i<myObject.state.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myObject.state[i];
optn.value = myObject.state[i];
document.myForm.state.options.add(optn);
if(optn.value==state1){
document.myForm.state.options[i].selected=true;
}
} 

City dropdown list : city

By default this will not have any options and after selection of state the matching city list will be populated.

All the three dropdown lists use onchange trigger to execute JavaScript function ajaxFunction() by passing a parameter. This parameter which gets stored in variable choice is used to prepare the query string. If country dropdown list is selected , then we will not add any selection to state and city variables in query string. ( this can change based on requirement )

ajax-dd3ck.php

This page receives the drop down list box data and does the validation. This validation script part is prepared based on data present in the list. In your case based on your data you may have to change the required validation.

For City list , the data should be alphabets only
For State list the data must alphabets which may contain blank space.
We prepare the list of state by using WHERE clause in SQL if country variable is present.

Similarly while preparing the query for city we check presence of country and state , for this we will use one AND command in SQL.

After collecting all the list box options ( State & City ) we post back to ajax-dd3.php page using Json.

We populate the dropdown list from the Json data by using array. Read adding options to drowdown list using JavaScript. download script
Visitors Rating
Your Rating


Google+

Sajin

19-06-2014

Hi there,

First of all, I am very thankful for you for giving this drop down list examples. I am new to ajax, so I encountered some problems...

I was using your Three interlinked dropdown listbox using Ajax & PHP.
I found a problem that, when the country name has some space in between then the second drop down won't display any values.

You have given GBR,IND like that , but when I changed the IND to "IND ABC", the the second drop down for that particular country was not shown.

It am struggling with this for the last two days. If you can give me a solution for this then it would be very helpul.

Can it be done without using PDO. Because the config file I have with me is not using PDO. So if it can be done only using PDO then it will be very risky for me.

Please help me with this Please reply.........

Thank you
Sajin
smo

19-06-2014

Add single quote to $row[country] like this '$row[country]'
Wdjoe

29-06-2014

There is a problem with your code and I can not figure out how to correct it.
If there is more than one city name for a state, only the first city name on the list can be chosen.
For example... If you choose "USA" then choose "California" the city name that will be displayed is "Los Angeles", but if you try and change that city name for another city name in California such as "San Jose" it reverts back to "Los Angeles".

Please help, I have been trying to find a solution for hours.
smo

03-07-2014

It is fixed now. Check once. Thanks for pointing this bug.
Jay

14-04-2015

Hey, thanks for your great example! I have a question, how can post additional information with subcat2? For instance Banana Hot description
subhendu

16-04-2015

All dropdown list boxes are part of FORM. So any textbox or textarea can be included to carry extra information.
Jerome

15-06-2015

Hey, thanks for your great tutorial.
I have a question, where is the dependence of the dropdown menu created. How can I chance it?
I would like to have an input field at the beginning, and then the second dropdown menu have to take options (output from a select-command, dependent on input from the input field.

(Sorry for my bad english, I hope it is understandly and correct enough.)
smo

15-06-2015

Inside zip file ( download ) you will get ajax-dd3ck.php file. In that there are SQL command with where clause to manage the output.

You can take the input box data also add into the where condition to get matching output for next dropdown list
Jerome

16-06-2015

Hey, thanks for your help.
Unfortunately, I 'm not so good in web design , and certainly not with AJAX and Javascript. Could you possibly help me in more detail?
I'm in an important project and need help. I need an input , and a click on a button, after that the following drop down menus should be filled with select commands from php. I do not know what I have to change ..
subhendu

16-06-2015

This can be done, pl open one thread in forum, we will post there.
JeromeAtom

17-06-2015

Ok. I put my question in this thread: http://www.plus2net.com/forum/topic.php?topic_id=3636

Tanks for your help.
Rob Ogden

24-07-2015

Great code, thanks. However, I would like to use this with 3 separate database tables, and it only appears to allow for a single column per select, i.e. the option (London, Birmingham) and not an ID. Any easy way of changing the code to allow for the 2 columns to pass through to the city select?
vasanth

21-11-2016

Dear All, thank u for this it is really helpful for me, but i need after the values are selected from drop down list. how to fetch the selected value into the another database using php echo method the sql variable. kindly suggest my query.

Post Comment This is for short comments only. Use the forum for more discussions.




HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer