Please note that we have used dd.php as our file name. So for the second drop down list the variable will be available. Once the element in first list gets selected it will call the function and the function will add the selected item to the query string and will reload the page. We will keep this function inside our head tag. We will write one function in JavaScript to handle the onchange event of the first drop down list box. We will be using the onchange event of the select element to submit the form. The variable to second list query is passed by submitting the form to itself when any value is selected in the first drop down list. In case of second drop down list the presence of variable having the value of category is checked and if the category number is present then the sql is changed to add one condition in where clause. The first table is populated in the first drop down list by taking directly from the table without any conditions in sql statement. The data taken for this example is common data of fruits, games, vehicles, colors used as category and corresponding values are taken as subcategory.
Both tables are linked by the field cat_id. One is category table and other one is subcategory table. Two tables created in mysql database for populating the data in the drop down lists. Interlinked Country > State > City List box using JQuery Interlinked two dropdown list using JQuery
Here also we have used PHP and backend script and MySQL as database. Here are some tutorials with Demo for managing dropdown list box using Jquery. Today most of the sites uses JQuery for better user experience. It became very easy to manage and modify the script if you are using JQuery. Please note that the all solutions require JavaScript client side support so it is better to check the JavaScript status for the client browser. Linking a listbox options to a radio button selection Populating options of dropdown list box by taking data from table Some solutions in installation and troubleshooting the script Other tutorials on Dropdown Listbox TutorialĮnabling second list box after selection of first list Three list boxes for Country, State & City using Ajax Linking Multiple selection of dropdown list with Second list box Using PHP & AJax to manage dropdown list box Demo
You can see similar solution of managing second drop down based on the first drop down in ASP using VBScript Demo and sample scripts to download Demo We will discuss the second solution as it is relevant to PHP MySQL section here and the first solution we will discuss in JavaScript drop down Tutorial section. The first choice is advisable when we don’t have many records for the second list and we can download all the data for the second list to client machine and handle it by using client side JavaScript.
One is to get the full items list for both the drop down list to the client sides and manage by JavaScript and the other solution is submitting the form to the server on selection of first list and based on the selection get the element data for the second list. This cascading dropdown list box script is required in many places and there are two ways to handle such requirement. Two dependent list boxes showing options of second list box based on selection of first list box.