Multiple select lists with Ajax

Instructions

1) Copy the files: "select_list.php" and "ajax_select.js" on your server, 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 "test.php" file.

• 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.

• Home Page: http://coursesweb.net/ajax/multiple-select-dropdown-list-ajax_t

- This script is Free, and Open Source. You can use, modify and publish it freely.
With blessing, MarPlo - MarPlo.net / CoursesWeb.net