Collegare select con PHP e Javascript

Lo scenario è uno dei più classici: abbiamo una select che rappresenta le sezioni e una che rappresenta le categorie che è collegata alla prima.

Nel db avremo una cosa del genere:

• tabella sezioni
  • sezione_id
  • sezione_nome
• tabella categorie
  • categoria_id
  • categoria_nome
  • sezione_FK (foreign key che la collega alle sezioni)

Quindi la select con le categoiei si riempie solo con quelle che corrispondo a una deternimata sezione.

Solo con il PHP questo non è possibile; ci vuole un pò di Javascript e AJAX.

Prima di tutto riempiamo la prima select:

function selectSection() {
global $config;
try {
$result = $config->getPdo()->query("SELECT * FROM sezioni ORDER BY sezione_nome");
return $result;
} catch (Exception $e) {
die($e->getMessage());
}
}

<td>Sezione:</td>
<td>
<select name="sezione" onchange="changeSelect(this.value);" id="sezione">
<option value="*">*</option>
<?php
foreach (selectSection () as $rowSection) {
echo "<option value='" . $rowSection['sezione_id'] . "'>" . $rowSection['sezione_nome'] . "</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>Categoria:</td>
<td>
<select name="categoria" id="categoria">
<option value='*'>*</option>
</select>
</td>
</tr>

Io uso PDO per la connessione, ma non cambia nulla.

Ora come ora viene riempita solo la select sezione, che richiama anche una funzione Javascript che ancora dobbiamo mettere su.

La select categoria ha solo un * tanto per renderla presentabile.

Questa la funzione JS da mettere nell'head della pagina:

<script type="text/javascript">
function changeSelect(str) {
if (str == "") {
document.getElementById("categoria").innerHTML = "";
return;
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("categoria").innerHTML = "<option value='*'>*</option>" + xmlhttp.responseText;
}
}
xmlhttp.open("GET","home-cat.php?sid=" + str, true);
xmlhttp.send();
}
</script>

Prima creiamo una richiesta AJAX suddividendo i casi IE dagli altri.

Quando avviene qualcosa succede tutto questa roba qua:

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("categoria").innerHTML = "<option value='*'>*</option>" + xmlhttp.responseText;
}
}
xmlhttp.open("GET","cat.php?sid=" + str, true);
xmlhttp.send();

Il vero lavoro viene fatto alla penultima riga dove mandiamo un dato in GET a una pagina che conterrà il codice che esegue la query e riempie la select:

<?php

$sid = $_GET['sid'];
$result = $config->getPdo()->query("SELECT * FROM categorie WHERE sezione_FK=" . $sid . " ORDER BY categoria_nome");
foreach ($result as $rowCat) {
echo "<option value='" . $rowCat['categoria_id'] . "'>" . $rowCat['categoria_nome'] . "</option>";
}

Più difficile spiegarlo a parole che leggerlo attentamente!!

IMPORTANT EDIT

Tutto il codice sopra funziona su tutti i browser tranne che su IE.

Apportando queste modifiche funzionerà su qualsiasi browser:

<tr>
<td>Categoria:</td>
<td>
<div id="div_cat">
<select name="categoria" id="categoria">
<option value='*'>*</option>
</select>
</div>
</td>
</tr>

Qua racchiudiamo la select in un div apposito.

La funzione Javascript diventerà così:

<script type="text/javascript">
function changeSelect(str) {
if (str == "") {
document.getElementById("categoria").innerHTML = "";
return;
}

var xmlhttp;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
xmlhttp = new XMLHttpRequest();
}

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(browser =="Microsoft Internet Explorer"){
document.getElementById("td_cat").innerHTML = "<div><select name=\"categoria\" id=\"categoria\"><option value=\"*\">*</option>" + xmlhttp.responseText + "</select></div>";
} else {
document.getElementById("categoria").innerHTML = "<option value='*'>*</option>" + xmlhttp.responseText;
}
}
}
xmlhttp.open("GET","home-cat.php?sid=" + str, true);
xmlhttp.send();
}
</script>

Come riferimento prendiamo il div e non più la select.

Poi iniettiamo direttamente tutta la select.

Ho cambiato qualcosa anche nella richiesta AJAX.