Two list boxes with options from MySQL where second list box changes on selection of first list box.

Two dependent list box is a very common requirement as the options of the second dropdown list box is depends on user selection of option of first dropdown list box. For example if you select a country from first drop down list then the second dropdown list will show the list of states of the selected country.

Read more and download source code from here.

We used student table in our tutorial so the first dropdown list box will show the name of the classes available against each row of data. We should show unique class names only as more records will have same class name. This unique class name we can get by using DISTINCT command in SQL.
By using DISTINCT query we will populate first drop down list using a While loop passing through all the rows of record sets.
More on how to read and populate options by using data from MySQL database.

On selection of first drop down list box a JavaScript function reload() will be triggered. Inside this function we will first read the user selected option of the drop down list box. Using this data the page will reload with a name value pair carrying the user selection data.
We will collect this data from the address bar by using GET method in PHP and create a variable.
This variable will be storing the user selected student class , hence we will use this in our SQL to retrieve the student names of that particular class. It is not a good idea to use the variable directly in query, so we will use parameterized query to send the data or parameters separately to the database. We will use MySQLi prepare() function with bind_param() to send string data along with Query. Here is out query with placeholder.
$query2 = "SELECT id,name FROM student WHERE class=? ";
Based on execution of this query we will get a record set containing rows of data matching to the class name passed to the query. We will use one WHILE loop to add the option to the second dropdown list box. Each step of while loop will extract one row of data. After returning one row of data the record pointer will move to next record. When all rows are returned and there is no more rows to return then it will return NULL which is False for the WHILE loop condition and the loop will terminate.
In this script every time we select one option from first drop down list the page will reload by carrying the selected option for the second drop down list to filter. We can use JQuery or Ajax if we don’t want page to reload while passing the value to second list box.

To hold the value of first dropdown list box , you can watch this video

[Adamfunchal]

This video is great.
I have a question: why after I choose the value of the first drop down list the second one update the values but the first one returns to the first value and doesn't stay with the value I have choosed?
If I want to save it in a database it will always save the first value of the first drop down list and not the value I have choosed.

[orionassefaw]

Can you do dependent second drop down list without having to use any JavaScript, just by using PHP? Would be interested to see any video on that, thanks

[humdost]

Most useful video and thanks for your hard work, sir how can i store these 2 values in other table when i tried its send only ids to other table not text value how can i do if you have any video or script plz share i will be thankful to you

[sarveshphoenix]

How would the Javascript work if the first dropdown were a multiselect? Because in that case, onChange will only record the last selected item, no?

[liquid_joy]

Bro I don't know why you video and the zip file which I downloaded from you site have different code .

But I am here to another reason:- actually your code with that special line "dd.php?$cat=' + val ; was modified to dd.php?id= +val

And boom...🔥🔥🔥 On the next page I put get command to get that id = value..

So in short i am thankful for your code and now I can use the drop down menu to get names from database and then their ID can be POST to next page and further events could be done 🙏🙏🙏❤️❤️🌹 thank you so much..

[daltonrandall]

Appreciate your input, but object oriented coding is bad.