Linked 2nd list box depending on selection of 1st one using JQuery, PHP, JSON
Before reading this you must understand how to populate dropdown list box by using records of a table.
Here we will use two list boxes in which the 2nd listbox ( sub category ) is shown based on the selection of 1st listbox ( category ). Both the drop down boxes uses records from two different tables.
Here are the files used in the script
main front end script which displays two selections
Back end PHP script to collect matching options for second list. Returns data as JSON string
Use this if you want to show text box if no matching sub category is found
Back end PHP script for dd1.php. Returns data as JSON string
Receives the selected options after submission of the form.
Database connection string , used by dd.php and ddck.php files. Read more on PDO Database connection
Database connection string , used by dd.php and ddck.php files inside mysqli folder . Read more on MySQLI Database connection
Use this sql dump to create tables used in this script.
dd.php : Showing the list box and jQueryThis file populates the first drop down list ( category ) by taking records from category table. For this it connects to database and collects all the records and add them as options to category list box.
Category name is displayed as Text part and cat_id is taken as options.
Here is the code to populate the 1st list box ( note: jQuery is not used )
Now we have seen in our previous listbox tutorial how to collect user selection of a list box. Here also once the category is selected by user the change function get fired.
After getting the variable now we will send it to backend script (ddck.php) and get new set of sub categories for our second dropdown , before that we will remove the existing options if any for the second dropdown.
Now we will use get method to post cat_id to backend script ddck.php and get all the matching records. These records are added as option to our second list box with id = sub_category.
When we receive the data for sub category we will get JSON string so we need to loop through and add each option to drop down listbox.
You can read more on how to add option to an existing dropdown list box.
Now the above process repeats once the first dropdown of category is changed by user.
Backend script ddck.phpThis page receives the posted value of cat_id and collects the matching records from sub_category table. The output is posted back as JSON string to calling page ( dd.php ) . Here is the complete code.
After selecting category and subcategory the user can submit the form. The data is collected and displayed inside dd-submit.php page.
Showing textbox in place of 2nd dropdown listSometime there may not be any matching data for the 2nd list to populate. In such a case we can ask user to enter their data in a text box. In this condition we will monitor the number of records found for 2nd list box. If number of records found is equal to zero then by using JQuery we will hide the dropdown listbox and show the text box. AT the page loading time this new text box we will keep inside the form and make it as hidden. Once the number of records found to be equal to zero we will hide the second dropdown listbox and show the text box.
For this modification there are two different files dd1.php and dd1ck.php placed inside your downloaded zip folder
Inside dd1ck.php file instead of directly collecting the sub – category details we will first check number of matching records returned and if the value is not equal to zero then we will collect records. Now we are returning number of records found to main script along with sub –category options.
In our JQuery script we will check number of records found than accordingly we decide to show dropdown list box or a text box for user to enter data.
How to Install the script.Open config.php file and enter your database login details.
Create tables by using sql-dump.txt file inside phpmyadmin
Open dd.php file through your server .
Open dd1.php file to use the script with textbox option as described above
This tutorial uses the concepts adding option to list box , posting data using get method and JSON parsing of string to get data. You can further extend to create three dropdown list linking to each other.
Sub category options not showing
Once the text box appears for sub category options, the selection of any item from category for which options available does not change the sub cateogry.
PDO was used for database connection and managing. Now the same script with MySQLI connection is added and kept inside mysqli folder. Any one can be used.
DEMO Script of this script is added .