Populating & managing drop down list box from table data

Please read how the client side linked drop down works in our previous sections for a better understanding of the script. Here we will try to get the data from a MySQL table and use client side JavaScript to add options and manage the list box controls. In the previous section we have used sample data to add ( manually ) to the list box. In many actual applications data are collected from tables. So we will learn how to collect data from table and by using JavaScript at client side we will manage them.

In the previous example inside the main.html page we have connected to one external JavaScript file list.js. Now we will place all our PHP code to get the data from MySQL inside this list.js file. So we will change the file extension of this JavaScript file to list.php. So now inside the main.html page we will include the JavaScript functions file like this . ( list.js file is included inside zip file for your reference )

<script language="javascript" src="list.php">

The above line is the only change in main.html page. Now let us move to list.php page to collect the data. For a better understanding please read the list.js file ( included inside the zip file ) and see how options are added and managed inside it. Now in our list.php file we will only use php to collect data from Mysql and format the JavaScript code to manage them. You can see that the processed output of list.php file is same as list.js file. Just open the list.php file in your browser the output will be same as source of list.js file.

Inside the list.php file at the top there is a file include linking config.php. Keep your mysql details like connecting string and login details inside this config.php file.

Then from the first table we will collect the cat_id and category name to fill the first drop down list box. We will keep the data collection while loop inside the JavaScript fillCategory function.

Now for the second list box we have to collect all the records and load them based on the selection of first list box. (see the list.js file how the options are added ). First we will collect all the cat_id and then collect the subcategory names respective to each cat_id. Here we will be using one external while loop and one internal while loop. In the external while loop we will collect all the cat_id from second table and for each value of cat_id we will collect names of subcategory by using internal loop.

After this addition , rest all are same as list.js file.

Download the zip file with the full code and sql dump file for table creation.

Subscribe to our YouTube Channel here

Using MySQL table data for controlling drop down list box

<script language="javascript" src="list.php">

Subscribe