Dynamic populating three drop down list based on the selected value of first two list
Reload the page after choosing a category
This demonstration uses ordinary PHP form data and two small JavaScript functions to reload the page. The current category is placed in the URL; the PHP script checks that it is a valid ID and uses a prepared statement to retrieve the matching subcategories.
function reload(form) {
const url = new URL('dd3.php', window.location.href);
url.searchParams.set('cat', form.elements.cat.value);
url.searchParams.delete('cat3');
window.location.assign(url.toString());
}When the first selection changes, any previous second-level selection is cleared. The second JavaScript function below sends both selected IDs to the same page before PHP loads the third list.
To update dependent dropdowns without reloading the page, see the separate three linked dropdowns using AJAX tutorial and its working demonstration.
Before reading this please read the dynamic filling of second drop down list with selected value of first list. Here we will work with three drop down lists where the value of second list is populated based on the selection of first list and the values of third drop down list are populated based on the selection of second drop down list.
DEMO: view demo for three dropdown list
Selecting the second list reloads the page with both IDs. On the server, the third list is populated from the selected subcategory, using a parameterized SQL query.
function reload3(form) {
const url = new URL('dd3.php', window.location.href);
url.searchParams.set('cat', form.elements.cat.value);
url.searchParams.set('cat3', form.elements.subcat.value);
window.location.assign(url.toString());
}
The accompanying SQL download contains the category, subcategory and third-level tables used by the demonstration. If you are facing any problem in using this code, please post it in php discussion forum with your error messages, bugs etc ..
view demo for three dropdown list here
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
| kiran | 04-11-2013 |
| i am using 3 dropdown menues, there are three table in my database,these tables are linked with foreign keys,but when i using just like your dd3.php, then 1st dropdown menu lost their value and get default value also when i getting the selected value in same page using this self.location="reg3.php?Result=" + nam; in javascript, and when i got notice error. please reply as soon as possible.. | |
| Aji Mohan Singh | 10-02-2014 |
| keep the drop down menu value javascript after submitting | |
| Stacey | 15-08-2014 |
| I am looking for an easy php code | |
| Mark | 19-11-2014 |
| If I have more than 12 items in the subcategory2 table that link to one item in subcategory table, it will not list them all. Do you know why? | |
| smo | 19-11-2014 |
| There is no reason why it should not list all 12 items ( if they are linked with category id ) | |
| mark | 20-11-2014 |
| yeah its weird. i had to truncate the table and reenter the values then it started working. | |
| Mark | 20-11-2014 |
| how does this solution handle duplicate values. I want it to be able to display duplicates if possible. | |
| smo | 20-11-2014 |
| At the database table the duplicate records are to be handled. You can use distinct command to get only unique records from table and display them as options. | |
| Akhil Nasim | 01-04-2017 |
| code is working.But i need the same code but when i select the city then i need to display the names of the person that stays in the city.how can i do this ? and also the name of the person should not displayed in dropdown , instead of i need to display just on the screen. | |
