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.
On this page: Multiple Drop-Down Select Lists Creator it is another Ajax script, with Administration Page, that can be used to create multiple select lists.
<?php // Multiple select lists - https://coursesweb.net/ajax/ // Here add your own data for connecting to MySQL database $server = 'localhost'; $user = 'root'; $pass = 'pasword'; $dbase = 'dbname'; // 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'); if(!isset($_SESSION)) session_start(); header('Content-type: text/html; charset=utf-8'); $preid = 'slo_'; // a prefix used for element's ID, in which Ajax will add <select> $col = $ar_cols[0]; // the variable used for the column that wil be selected $re_html = ''; // will store the returned html code // if there is data sent via POST, with index 'col' and 'wval' if(isset($_POST['col']) && isset($_POST['wval'])) { // set the $col that will be selected and the value for WHERE (delete tags and external spaces in $_POST) $col = trim(strip_tags($_POST['col'])); $wval = trim(strip_tags($_POST['wval'])); } $key = array_search($col, $ar_cols); // get the key associated with the value of $col in $ar_cols $wcol = $key===0 ? $col : $ar_cols[$key-1]; // gets the column for the WHERE clause // gets the next element in $ar_cols (needed in the onchange() function in <select> tag) $last_key = count($ar_cols)-1; $next_col = $key<$last_key ? $ar_cols[$key+1] : ''; $conn = new mysqli($server, $user, $pass, $dbase); // connect to the MySQL database if (mysqli_connect_errno()) { exit('Connect failed: '. mysqli_connect_error()); } // check connection $_SESSION['ar_cols'][$wcol] = isset($wval) ? $conn->real_escape_string($wval) : $wcol; // store in SESSION the column and its value for WHERE // sets an array with data of the WHERE condition (column=value) for SELECT query for($i=1; $i<=$key; $i++) { $ar_where[] = '`'. $ar_cols[$i-1]. "`='". $_SESSION['ar_cols'][$ar_cols[$i-1]] ."'"; } // define a string with the WHERE condition, and then the SELECT query $where = isset($ar_where) ? ' WHERE '. implode($ar_where, ' AND ') : ''; $sql = "SELECT DISTINCT `$col` FROM `$table`".$where; $result = $conn->query($sql); // perform the query and store the result // if the $result contains at least one row if ($result->num_rows > 0) { // sets the "onchange" event, which is added in <select> tag $onchg = $next_col!==null ? " onchange=\"ajaxReq('$next_col', this.value);\"" : ''; // sets the select tag list (and the first <option>), if it's not the last column if($col!=$ar_cols[$last_key]) $re_html = $col. ': <select name="'. $col. '"'. $onchg. '><option>- - -</option>'; while($row = $result->fetch_assoc()) { // if its the last column, reurns its data, else, adds data in OPTION tags if($col==$ar_cols[$last_key]) $re_html .= '<br/>'. $row[$col]; else $re_html .= '<option value="'. $row[$col]. '">'. $row[$col]. '</option>'; } if($col!=$ar_cols[$last_key]) $re_html .= '</select> '; // ends the Select list } else { $re_html = '0 results'; } $conn->close(); // if the selected column, $col, is the first column in $ar_cols if($col==$ar_cols[0]) { // adds html code with SPAN (or DIV for last item) where Ajax will add the select dropdown lists // with ID in each SPAN, according to the columns added in $ar_cols for($i=1; $i<count($ar_cols); $i++) { if($ar_cols[$i]===null) continue; if($i==$last_key) $re_html .= '<div id="'. $preid.$ar_cols[$i]. '"> </div>'; else $re_html .= '<span id="'. $preid.$ar_cols[$i]. '"> </span>'; } // adds the columns in JS (used in removeLists() to remove the next displayed lists when makes other selects) $re_html .= '<script type="text/javascript">var ar_cols = '.json_encode($ar_cols).'; var preid = "'. $preid. '";</script>'; } else echo $re_html;
// Multiple select lists - https://coursesweb.net/ajax/ // function used to remove the next lists already displayed when it chooses other options function removeLists(colid) { var z = 0; // removes data in elements with the id stored in the "ar_cols" variable // starting with the element with the id value passed in colid for(var i=1; i<ar_cols.length; i++) { if(ar_cols[i]==null) continue; if(ar_cols[i]==colid) z = 1; if(z==1) document.getElementById(preid+ar_cols[i]).innerHTML = ''; } } // sends data to a php file, via POST, and displays the received answer function ajaxReq(col, wval) { removeLists(col); // removes the already next selects displayed // if the value of wval is not '- - -' and '' (the first option) if(wval!='- - -' && wval!='') { var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest instance var php_file = 'select_list.php'; // path and name of the php file // create pairs index=value with data that must be sent to server var data_send = 'col='+col+'&wval='+wval; request.open("POST", php_file, true); // set the request document.getElementById(preid+col).innerHTML = 'Loadding...'; // display a loading notification // adds a header to tell the PHP script to recognize the data as is sent via POST request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.send(data_send); // calls the send() method with data_send // Check request status // If the response is received completely, will be added into the tag with id value of "col" request.onreadystatechange = function() { if (request.readyState==4) { document.getElementById(preid+col).innerHTML = request.responseText; } } } }
// 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').
// 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.
<?php include 'select_list.php'; ?>
<script src="ajax_select.js" type="text/javascript"></script>
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).
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.
id | site | menu | categ | links |
---|---|---|---|---|
1 | MarPlo.net | Courses | Ajax | marplo.net/ajax/ |
2 | MarPlo.net | Courses | JavaScript | marplo.net/javascript/ |
3 | MarPlo.net | Courses | English | marplo.net/engleza/ |
4 | MarPlo.net | Anime | Aspecte de viata | marplo.net/anime/aspecte-viata |
5 | MarPlo.net | Anime | Comedie | marplo.net/anime/comedie |
6 | MarPlo.net | Anime | Romantic | marplo.net/anime/romantic |
7 | CoursesWeb.net | Games | Adventure-Mystery | https://coursesweb.net/games/adventure |
8 | CoursesWeb.net | Games | Logic and Intuition | https://coursesweb.net/games/logic-perspicacity |
9 | CoursesWeb.net | PHP-MySQL | Lessons | https://coursesweb.net/php-mysql/ |
10 | CoursesWeb.net | PHP-MySQL | Tutorials | https://coursesweb.net/php-mysql/tutorials_t |
11 | CoursesWeb.net | JavaScript | Lessons | https://coursesweb.net/javascript/ |
12 | CoursesWeb.net | JavaScript | Tutorials | https://coursesweb.net/javascript/tutorials_t |
13 | CoursesWeb.net | JavaScript | jQuery | https://coursesweb.net/jquery/jquery-course |
14 | CoursesWeb.net | Flash-AS3 | Flash Lessons | https://coursesweb.net/flash/lessons |
15 | CoursesWeb.net | Flash-AS3 | ActionScript Lessons | https://coursesweb.net/actionscript/lessons-as3 |
16 | CoursesWeb.net | Flash-AS3 | Tutorials | https://coursesweb.net/flash/tutorials_t |
// 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');
<?php include 'select_list.php'; ?> <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Triple Select drop down list with Ajax</title> <script src="ajax_select.js" type="text/javascript"></script> </head> <body> <form action="" method="post"> Select: <?php echo $re_html; ?> </form> </body> </html>
// 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);
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250"> <param name="src" value="file.swf" /> Your browser not support SWF. </object>
input:focus { background-color: #88fe88; }
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}'; var obj = JSON.parse(jsnstr); alert(obj.url);
if (file_put_contents("file.txt", "content")) echo "The file was created"; else echo "The file can not be created";