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.
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 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.
var optn = document.createElement("OPTION");
optn.text = myObject.state[i];
optn.value = myObject.state[i];
City dropdown list : city
By default this will not have any options and after selection of state the matching city list will be populated.
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.
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.........
Add single quote to $row[country] like this '$row[country]'
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.
It is fixed now. Check once. Thanks for pointing this bug.
Hey, thanks for your great example! I have a question, how can post additional information with subcat2? For instance Banana Hot description
All dropdown list boxes are part of FORM. So any textbox or textarea can be included to carry extra information.
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.)
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
Hey, thanks for your help.
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 ..
This can be done, pl open one thread in forum, we will post there.
Ok. I put my question in this thread: https://www.plus2net.com/forum/topic.php?topic_id=3636
Tanks for your help.
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?
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.