MSLA - Multiple Select Lists with Ajax

Php-mysql Course

There is a new version of this script, on this page: MSLA2 - Filter Content with Multiple Select Lists with Ajax .
- The content can be displayed to each Select list, and can be added from multiple columns, in the same MySQL table.
- That script can be included in ".php" and ".html" pages, so, it can be included in the template of a CMS.

MSLA is an Ajax application (build with JavaScript and PHP) that can be used to create multiple select dropdown lists with data from MySQL database in any web page on a server with PHP.
This script can be included in ".php" and ".html" pages, but the server must run PHP. It can be easily added into the template of a CMS.

• To Download the script, click this link: Download MSLA (72 KB).


- Demo 1 (triple select drop down list with a description displayed when it is selected an option in the last Select-list): - Demo 2 (just a double select drop down lists):

Installation

1. Download the archive with the script from the link above, and unzip it on your computer.
2. Open the "msla.php" file and add your own data for connecting to MySQL, the table name (in the $table variable) 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, set null for the last item (replace 'villdata' with null).
   
3. Copy the files: "msla.php" and "msla.js" on your server.
4. In the web page in which you want to add the select lists with Ajax, add this Div in the place where you want to display the Select lists (Do Not change its ID because it is used in JavaScript code):

   Select: <div id="msla"></div>

   - Then, include the "msla.js" script after that Div, by adding the following code:

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

   
   - replace "path_to/msla.js" with the path to the "msla.js" file on your server.

Other Specifications

• Data for all the <select> lists must be stored into a single table in MySQL with column for each set of <select> lists, like the table from this image (click on it):

- The last column (here "descr") is optional, and contains the description that is displayed when it is selected an <option> in the last Select list, as a description for that option (like in Demo 1).

• The PHP script creates a JSON object with data for each Select list:

{
"cn": "column name",
"opt": ["option_1", "option_2", "..."],
"descr": "description"
}

- "cn" contains the column name from MySQL table, which stores the options for the Select list
- "opt" contains an array with values for the <option> elements in the <select> list.
- "descr" will contain the description when it is selected an Option in the last Select list; in the rest it is empty.

• The Ajax script receives the JSON object and creates Select list with those data, into a <span> element for each <select> list, in the Div with id="msla".
- The description from "descr" is added into a Div with class="msla_descr".

• In case of MySQL error, the php script outputs this JSON: {"err": "Error Message"}, and the JavaScript will show an alert with the 'Error Message'.

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.

• This script is Free, and Open Source. You can use, modify and publish it freely.

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}