AJAX Course

Multiple Select Dropdown List with AJAX

This tutorial presents an AJAX script that can be used to create dynamically multiple Select lists with data from a MySQL table.

First, a single select list is displayed on the page, then when the user chooses an option, it calls an Ajax function that acceses a PHP file that will return a select list according to the option selected. The Ajax function receives and displays the second select list.
When the users selects an option from the second select list, this script can display a third list of options, according to the options selected in the first an second select lists.

The script contains two files, a PHP file (named "select_list.php") with the code that selects data from a MySQL table and returns a select drop down list, and a JS file (named "ajax_select.js") with the Ajax code that accesses the PHP file.
You can copy and use the code for these files displayed below, or download the files from: Script Multiple Select Dropdown List

Usage Script Multiple Select Drop down List

1) Create the files: "select_list.php" and "ajax_select.js" on your server (with the code presented above), in the same directory.
In the PHP script, add your own data for connecting to MySQL, the table name (in $table) and the name of the columns with data for each Select list (in the array $ar_cols).

- For example, if you have a table named "cities", and you want to create a triple select drop down list with data stored in the columns: "state", "city", and "villages"; then to display some descriptions about each village stored in another column named "villdata", change the value of the $table and $ar_cols variables like this:

// Here add the name of the table and columns that will be used for select lists, in their order
$table = 'cities';
$ar_cols = array('state', 'city', 'villages', 'villdata');

If you want to display only the three select lists (state, city, villages), or you not have a column with description, add null for the last element (in place of 'villdata').

- If you want to create two select drop down list, and then a description for the options of the second Select, add like this:

// Here add the name of the table and columns that will be used for select lists, in their order
$table = 'table_name';
$ar_cols = array('col_select1', 'col_select2', 'col_description');

If you want to display only the Select lists associated with "col_select1" and "col_select2", replace 'col_description' with null.

2) In the web page in which you want to display the select lists with Ajax:
- You must include the "select_list.php" file at the beginning of the page, by adding the following php code, before the HTML code, or any output data (this because it uses session_start()):

<?php include 'select_list.php'; ?>

- Include the "ajax_select.js" file in the HEAD section of the HTML code, by adding the following code:

<script src="ajax_select.js" type="text/javascript"></script>

- Then, in the form where you want to display the Select lists, add:

Select: <?php echo $re_html; ?>

Like you can see in the example below, or in the "test.php" file (in the archive downloaded from the link above).

• The PHP script creates the first <select> with the options from the first column added in $ar_cols Array, then creates HTML tags in which Ajax will add the next Select lists. These HTML tags has an unique ID composed by the string added in $preid variable and the name of the column. The $preid is used to be sure that there isn't another element with the same ID on the page.

If you want to include the select drop down lists into a form, and then to send and use the selected options in other PHP script, you can get the selected value using the "name" of each select, which is the same with the column name with the options for that select, added in the $ar_cols variable.
- For example, the first <select> has name="col_select1" (the first value added in the $ar_cols array). To get the selected option of this dropdown list, use in your PHP script: $_POST['col_select1'].
The second Select list has name="col_select2" (the second value added in the $ar_cols array), and so on.

- If you modify something in the instrutions of the PHP script or in the JavaScript functions, without knowing what you do, it's pretty sure the script to not work.

Example Triple Select drop down list

Here's is a concrete example. We have in MySQL a table named "sites" with these columns: id, site, menu, categ, links; having the following records:

We create a triple select list with options stored in the columns: "site", "menu", and "categ", then we'll display the data stored in the column "links", associated with the option selected in the last list (categ).
In the "select_list.php" we set the code:

// Here add the name of the table and columns that will be used for select lists, in their order
// Add null for 'links' if you don't want to display their data too
$table = 'sites';
$ar_cols = array('site', 'menu', 'categ', 'links');

The web page that will display the Select lists has the following code:

Example Double Select Drop down list

Now we create only two select dropdown list, with the options stored in the columns "site", and "menu" (in the same table presented above).
We just need to modify the $ar_cols variable (in "select_list.php"), by adding the elements 'site', 'menu', and null :

// Here add the name of the table and columns that will be used for select lists, in their order
$table = 'sites';
$ar_cols = array('site', 'menu', null);