MSLA2 - Filter Content with Multiple Select Lists with Ajax

Php-mysql Course

MSLA2 is an Ajax application (build with JavaScript and PHP) that can be used to create content that can be filtered using multiple select dropdown lists with data from MySQL database.
- The content can be added from multiple columns, in the same MySQL table.
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 (111 KB).
 
- Demo 1 (triple select dropdown list with content displayed when an option is selected): - 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 "msla2.php" file and set:

   - your own data for connecting to MySQL, in the $mysql array.
   - the table name, in the $table variable.
   - the name of the columns with Options, and the text for each Select list, in the array $col_sel.

   ---

   - For example:
   • If you have a table named "cars", and you want to create a triple select drop-down list to filter the cars, with Options stored in the columns: "mark", "year", and "color"; change the value of the $table and $col_sel array like this (the keys of the array $col_sel represent the column name, the values are the text that is displayed in front of the <select> lists):

   // HERE add the name of the table
   $table ='sites';
   
   // HERE add the columns that will be used for <select> lists,
   // and the Text that will be displayed to the <select> associated to each column ('column_name'=>'text')
   $col_sel = array('mark'=>'Sel:mark', 'year'=>'Sel:year', 'color'=>'Sel.3');
   

   • If (for example) the table has other two columns named: "cdata", "cnt", for descriptions /content that is displayed to each select list (according to the selected option) change the value of the $col_desc variable like this:

   //HERE you can add columns with data for description /content
   //Let it empty ( array(() ) if you not use column for description
   $col_desc = array('cdata', 'cnt');
   

   • And finally, in the $sel_desc variable add the selected list (columns) for which to display description, after it is selected an option. For example, in the table "cars", if you want to display descriptions only when it is selected an option in the "year" and "color" lists, set $sel_desc like this:

   //HERE add the selected list (columns) for which to display description, after it is selected an option
   $sel_desc = array('year', 'color');
   

   If you want to display only the three select lists (mark, year, color), or you not have a column with description, let empty the array in the $col_desc variable, array().

   ---

3. Copy the files: "msla2.php" and "msla2.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="msla2"></div>

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

   <script src="path_to/msla.js"></script>

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

Other Specifications

• Data for all the <select> lists and the content to filter must be stored into a single table in MySQL with column for each set of <select> lists, and one or more columns for content /descriptions, like the table from this image (click on it):

- The columns: "links, descr, s_date" are used for descriptions /content that is filtered and displayed with dropdown select lists according to the selected option.

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

{
"col": "column name",
"sel_txt": "text for <select>",
"opt": ["option_1", "option_2", "..."],
"descr": "description 1, description 2, ..."
}

- "col" contains the column name from MySQL table, which stores the options for Select list
- "sel_txt" the text that is displayed in front of each <select>
- "opt" contains an array with values for the <option> elements in the <select> list.
- "descr" will contain a string with content filtered by selected options.

• 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="msla2".
- The content from "descr" is added with JavaScript into a Div with id="msla2_desc". Each column with description is added into a SPAN tag, in DIV with class="msla2_descr".
- The DIV for descriptions/ content is defined in "msla2.php" on the lines 73..78.

//sets data in 'descr', each row with all columns for description is added in <div>, each description in <span>
if($cols[0] !=$col && $nrc >0 && in_array($cols[$col_i], $sel_desc)){
 for($i=0; $i<$nrc; $i++){
 $re_msla2['descr'] .='<span>'. $row[$col_desc[$i]] .'</span>';
 }
 $re_msla2['descr'] ='<div class="msla2_descr">'. $re_msla2['descr'] .'</div>';
}

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 as the column name with the options for that select, added in the $col_sel variable.
- For example, the first <select> has name="col_select1" (the first value added in the $col_sel 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 $col_sel array), and so on.

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

<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>

.some_class {
  line-height: 150%;
}

document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}

$ar_dir = scandir("dir_name");
var_export($ar_dir);