Multiple Select Dropdown List cu AJAX

Curs Ajax

In acest tutorial e prezentat un script AJAX care poate fi folosit la crearea dinamica a mai multor liste Select cu optiuni (denumite si "Drop down list") cu date dintr-un tabel MySQL, in functie de optiunea aleasa.

La inceput e afisata o singura lista select, cand utilizatorul selecteaza o optiune, se apeleaza o functie Ajax care acceseaza un fisier PHP ce va returna o lista Select in functie de optiunea aleasa. Functia Ajax primeste raspunsul si afiseaza a doua lista Select.
Cand utilizatorul selecteaza o optiune din a doua lista, acest script poate afisa o a treia lista "Drop down" cu optiuni, in functie de optiunile alese in prima si a doua lista Select.

Scriptul contine doua fisiere: un fisier PHP (denumit "select_list.php") cu codul pt. selectarea datelor din tabelul MySQL si retrnarea codului HTML cu lista Select, si un fisier JS (denumit "ajax_select.js") cu functia Ajax care acceseaza fisierul PHP.
Puteti copia si folosi codurile pt. aceste fisiere prezentate mai jos, sau descarcati-le de la link-ul: Script Multiple Select Drop down List.

Codul pentru select_list.php

<?php
// Liste select multiple - marplo.net/ajax/

// Aici adaugati datele dv. pt. conectare la baza de date MySQL
$server = 'localhost';
$user = 'root';
$pass = 'parola';
$dbase = 'baza_date';

// Aici adaugati numele tabelului, apoi coloanele pt. lista select, in ordinea lor
// Adaugati null in loc de 'links', daca nu vreti sa fie afisate si datele din ea
$table = 'sites';
$ar_cols = array('site', 'menu', 'categ', 'links');

if(!isset($_SESSION)) session_start();
header('Content-type: text/html; charset=utf-8');

$preid = 'slo_';        // un prefix folosit la ID-ul elementelor in care Ajax va adauga <select>
$col = $ar_cols[0];     // variabila in care e retinuta coloana ce trebuie selectata
$re_html = '';          // va retine codul html returnat de script

// daca sunt date primite prin POST, cu index 'col' si 'wval'
if(isset($_POST['col']) && isset($_POST['wval'])) {
  // seteaza $col ce trebuie selectat si valoarea pt WHERE (sterge tag-uri si spatii exterioare din $_POST)
  $col = trim(strip_tags($_POST['col']));
  $wval = trim(strip_tags($_POST['wval']));
}

$key = array_search($col, $ar_cols);    // obtine index-ul asociat cu valoarea lui $col din $ar_cols
$wcol = $key===0 ? $col : $ar_cols[$key-1];  // obtine coloana pt conditia WHERE
  
// obtine urmatorul element din $ar_cols (folosit la functia onchange() din tag-ul <select>)
$last_key = count($ar_cols)-1;
$next_col = $key<$last_key ? $ar_cols[$key+1] : '';

$conn = new mysqli($server, $user, $pass, $dbase);  // conectare la baza de date MySQL

if(mysqli_connect_errno()) { exit('Connect failed: '. mysqli_connect_error()); }  // verificare conexiune

$_SESSION['ar_cols'][$wcol] = isset($wval) ? $conn->real_escape_string($wval) : $wcol; //retine in SESSION coloana si valoarea ei pt WHERE

// setare array cu datele conditiei WHERE (coloana=valoare) pt. instructiunea SELECT
for($i=1; $i<=$key; $i++) {
  $ar_where[] = '`'. $ar_cols[$i-1]. "`='". $_SESSION['ar_cols'][$ar_cols[$i-1]] ."'";
}

// defineste sirul cu conditia WHERE, apoi instructiunea SELECT
$where = isset($ar_where) ? ' WHERE '. implode($ar_where, ' AND ') : '';
$sql = "SELECT DISTINCT `$col` FROM `$table`".$where;

$resql = $conn->query($sql);    // trimite comanda la serverul MySQL

// daca $resql contine cel putin un rand
if ($resql->num_rows > 0) {
  // seteaza evenimentul "onchange" care se adauga in <select>
  $onchg = $next_col!==null ? " onchange=\"ajaxReq('$next_col', this.value);\"" : '';

  // seteaza tag-ul pt lista select, daca nu e ultima coloana
  if($col!=$ar_cols[$last_key]) $re_html = $col. ': <select name="'. $col. '"'. $onchg. '><option>- - -</option>';

  while($row = $resql->fetch_assoc()) {
    // daca e ultima coloana, returneaza datele din ea, altfel le adauga in tag-uri OPTION
    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> ';    // inchide lista Select
}
else { $re_html = '0 rezultate'; }

$conn->close();

// daca coloana selectata, $col, e primul element in $ar_cols
if($col==$ar_cols[0]) {
  // adauga tag-uri SPAN (sau DIV la ultimul element) unde Ajax va adauga listele <select>
  // cu ID in fiecare SPAN, cu numele coloanelor adaugate 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>';
  }

  // adauga coloanele in JS (folosite in removeLists() ca sa stearga listele select afisate, cand se alege alta optiune)
  $re_html .= '<script type="text/javascript">var ar_cols = '.json_encode($ar_cols).'; var preid = "'. $preid. '";</script>';
}
else echo $re_html;

Codul pentru ajax_select.js

// Liste select Multiple - marplo.net/ajax/

// functie utilizata la stergerea urmatoarelor liste deja afisate, cand se alege alta optiune
function removeLists(colid) {
  var z = 0;
  // sterge datele din elementele cu id-ul stocat in variabila "ar_cols"
  // incepand cu elementul al carui ID e 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 = '';
  }
}

// trimite date la un script php, prin POST, si afiseaza raspunsul primit
function ajaxReq(col, wval) {
  removeLists(col);   // sterge listele select deja afisate

  // daca valoarea lui wval nu e '- - -' sau '' (primul <option>)
  if(wval!='- - -' && wval!='') {
    var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  //XMLHttpRequest instance
    var php_file = 'select_list.php';     // calea si numele fisierului php

    // creare perechi index=valoare cu datele ce vor fi trimise la server
    var  data_send = 'col='+col+'&wval='+wval;

    request.open('POST', php_file, true);  // seteaza cererea Ajax

    document.getElementById(preid+col).innerHTML = 'Incarcare...';   // notificare de incarcare

    // adauga header care sa transmita script-ului PHP sa recunoasca datele ca fiind transmise prin POST
    request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    request.send(data_send);   // apeleaza metoda send() cu data_send

    // Verifica starea cererii
    // Daca raspunsul e primit complet, il adauga in tag-ul cu id-ul din "col"
    request.onreadystatechange = function() {
      if (request.readyState==4) {
        document.getElementById(preid+col).innerHTML = request.responseText;
      }
    }
  }
}

Utilizare Script Multiple Select Drop down List

1) Creati fisierele: "select_list.php" si "ajax_select.js" pe server (avand codul prezentat mai sus pt. fiecare), ambele in acelasi director.
In script-ul PHP adaugati datele dv. pentru conectare la baza de date MySQL, numele tabelului (in $table) si numele coloanelor unde sunt datele pt. fiecare lista Select (in array-ul $ar_cols).

- De exemplu, daca aveti un tabel numit "orase", si vreti sa creati un select triplu, cu datele din trei coloane (cate una pt. fiecare <select>): "regiune", "oras", si "sate"; apoi sa fie afisata o descriere, stocata in alta coloana "datesat", despre fiecare sat ales, schimbati valorile din variabilele $table si $ar_cols astfel:

// Aici adaugati numele tabelului, apoi coloanele pt. lista select, in ordinea lor
$table = 'orase';
$ar_cols = array('regiune', 'oras', 'sate', 'datesat');

Daca vreti sa fie afisate doar cele trei liste select (regiune, oras, sat), sau nu aveti si o coloana pt. descriere, adaugati null pt. ultimul element (aici in loc de 'datesat').

- Daca vreti sa creati doua liste select "drop down", si apoi o descriere la optiunea aleasa din al doilea select, adaugati asa:

// Aici adaugati numele tabelului, apoi coloanele pt. lista select, in ordinea lor
$table = 'nume_tabel';
$ar_cols = array('col_select1', 'col_select2', 'col_descriere');

Daca vreti sa afisati doar listele Select cu optiunile stocate in "col_select1" si "col_select2", inlocuiti 'col_descriere' cu null.

2) In pagina unde vor fi afisate listele select cu Ajax:
- Trebuie sa includeti fisierul "select_list.php" la inceputul paginii, cu urmatoarea instructiune, inaintea codului HTML sau a altor date de iesire (aceasta deoarece foloseste session_start()):

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

- Includeti si fisierul "ajax_select.js" in sectiunea HEAD a codului HTML, cu urmatorul cod:

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

- Apoi, in formular unde vreti sa fie afisate listele Select, adaugati:

Select: <?php echo $re_html; ?>

Dupa cum puteti vedea in exemplu de mai jos, sau in fisierul "test.php" (din arhiva ce poate fi descarcata la link-ul de mai sus).

• Scriptul PHP creaza primul <select> cu optiunile din prima coloana adaugata in $ar_cols, apoi creaza tag-uri HTML unde Ajax va adauga urmatoarele liste Select. Aceste tag-uri HTML au un ID unic, compus din sirul adaugat in variabila $preid si numele coloanelor. Variabila $preid e folosita ca sa fie mai sigur ca nu exista un alt element cu acelasi ID in pagina.
- Numele de variabile si ID folosite in script-ul PHP si in functiile JavaScript sunt legate intre ele, daca modificati ceva in instructiunile lor, fara sa stiti sigur ce face, e posibil sa nu mai functioneze.

Exemplu Triplu Select drop down

Iata un exemplu concret. In MySQL avem un tabel denumit "sites" cu aceste coloane: id, site, menu, categ, links: avand urmatoarele randuri inregistrate:
Creem trei liste select cu optiuni salvate in coloanele: "site", "menu", si "categ", apoi afisam datele din coloana "links", in functie de optiunea selectata in ultima lista (categ).
In fisierul "select_list.php" setam urmatorul cod:

// Aici adaugati numele tabelului, apoi coloanele pt. lista select, in ordinea lor
// Adaugati null in loc de 'links', daca nu vreti sa fie afisate si datele din ea
$table = 'sites';
$ar_cols = array('site', 'menu', 'categ', 'links');

Pagina web in care vor fi afisate listele Select are urmatorul:

<?php include 'select_list.php'; ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Triplu Select Dropdown list cu 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>

- Iata rezultatul:

Exemplu Dublu Select Drop down list

Acum vom crea doua liste select drop down, cu optiunile din coloanele "site", si "menu" (din acelasi tabel prezentat mai sus).
Trebuie doar sa modificam variabila $ar_cols (in "select_list.php"), adaugand elementele 'site', 'menu', si null :

// Aici adaugati numele tabelului, apoi coloanele pt. lista select, in ordinea lor
$table = 'sites';
$ar_cols = array('site', 'menu', null);

- In aceeasi pagina web creata in exemplu precedent va rezulta:

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

.some_class {
  display: list-item;
}

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

I`m living here.
- Traiesc /Locuiesc aici.

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.