Είναι πολλές φορές που θέλουμε ένα συνδυασμό από select boxes
έτσι ώστε επιλέγοντας το ένα να παίρνει τις ανάλογες τιμές το δεύτερο.
Στο παράδειγμα παρακάτω θα δούμε έναν συνδυασμό από δυο select.
Στο πρώτο θα επιλέγουμε την χώρα και στο δεύτερο θα εμφανίζονται οι πόλεις της.
Βέβαια μπορούμε να συνδυάσουμε όσα select χρειαζόμαστε για να εκτελέσουμε την ενέργεια που θέλουμε.
Λοιπόν θα χρειαστούμε 4 αρχεία.
- countries.php Σε αυτό το αρχείο θα έχουμε δυό πίνακες με τα δεδομένα που χρειαζόμαστε.
-
index.php Θα έχουμε την html φόρμα, αλλά και php κώδικα.
-
script.js Όπου θα έχουμε την javascript.
-
script.php Για τον php κώδικα.
countries.php
/**
* Εδώ έχουμε δυο πίνακες. Ο πίνακας $countries[] έχει τιμές τις χώρες, και κλειδιά
* τον διεθνή κωδικό κάθε χώρας. Από αυτούς τους πίνακες θα παίρνει το script.php και το index.php τα
* δεδομένα που χρειάζονται.
*/
$countries = array(
"gr" => "Ελλάδα",
"es" => "Ισπανία",
"de" => "Γερμανία",
"it" => "Ιταλία"
);
/**
* Ο πίνακας $cities[] είναι δισδιάστατος δηλαδή κάθε κλειδί έχει τιμή έναν πίνακα με πόλεις.
*/
$cities = array(
"gr" => ["Ιωάννινα", "Θεσσαλονίκη", "Αθήνα", "Λάρισα"],
"es" => ["Μαδρίτη", "Σεβίλλη", "Γραναδα", "Βαλένθια"],
"de" => ["Βερολίνο", "Μόναχο", "Φρανκφούρτη", "Κολωνία"],
"it" => ["Μιλάνο", "Ρώμη", "Βερολίνο", "Νάπολη"]
);
index.php
<!--
Θα συμπεριλάβουμε το countries.php αρχείο για να πάρουμε τις χώρες από τον πίνακα
countries.
-->
<?php require 'countries.php'; ?>
<form action="" method="post" enctype="multipart/form-data">
<h2>Select combo box</h2>
<h5>Επιλέγοντας μια χώρα στο πρώτο select, αυτόματα θα φορτώνονται οι πόλεις στο δεύτερο.</h5>
<!--
Μέσα στην φόρμα έχουμε τα δύο select box.
Εδώ στο πρώτο έχουμε προσθέσει το onchange event πού σημαίνει ότι ο browser
παρακολουθεί το συγκεκριμένο select και όταν θα επιλέγουμε κάποια επιλογή(option) θα τρέχει
η getCities() συνάρτηση με παράμετρο την τιμή(value) του επιλεγμένου option.
-->
<select name='countries' id="countries" onchange="getCities(this.value)">
<option value="">Επιλέξτε την χώρα</option>
<?php
/**
* Από τον πίνακα $countries[] θα πάρουμε τις τιμές του, που είναι οι χώρες, και με έναν
* foreach() βρόχο(loop) θα τυπώσουμε το κλειδί και την τιμή μέσα σε option.
*/
foreach ($countries as $key => $value) {
?>
<option value="<?php echo $key ?>"><?php echo $value; ?></option>
<?php
}
?>
</select>
<!--
Στο δεύτερο select έχουμε δώσει μια id=cities για να μπορέσουμε με την
javascript να προσθέσουμε τα option με τις πόλεις που θα στέλνει η php.
-->
<select name='cities' id="cities" disabled='true'>
<option value="">Επιλέξτε την πόλη</option>
</select>
</form>
<!-- Το javascript αρχείο που τρέχει τα script μας. -->
<script src="script.js"></script>
script.js
// H getCities() τρέχει στο onchange event που έχουμε στην select countries στο html.
function getCities(countryCode){
// Η παράμετρος countryCode είναι η value(κωδικός χώρας).
// Στοχεύουμε το δεύτερο select όπου θα εμφανίζονται οι πόλεις.
let citiesDropDown = document.getElementById('cities');
// Στο παρακάτω if θα τσεκάρουμε την τιμή(value) που μας στέλνει η select countries.
// Εαν δεν υπάρχει τιμή(value) τότε θα κάνουμε ένα reset στο select cities.
if(countryCode == ""){
// Θα επιλέξουμε να εμφανίζεται το πρώτο option με text 'Επιλέξτε πολη'...
citiesDropDown.options[0].selected = true;
// ... θα το ορίσουμε disabled(ανενεργό).
citiesDropDown.setAttribute('disabled', true);
// ... και θα τερματήσουμε την συνάρτηση. Δεν υπάρχει λόγος να τρέξει το
// script χωρίς τιμή(value).
return;
}
// Ορίζουμε ένα νέο XMLHttpRequest() αντικείμενο στην μεταβλητή http.
let http = new XMLHttpRequest();
// Με την open() ανοίγουμε την επικοινωνία με τον server.
// Μέσα στην open() ορίζουμε την μέθοδο και το αρχείο php.
http.open('post', 'script.php');
// Λέμε στον server να αντιμετωπίσει τα δεδομένα ως δεδομένα φόρμας.
http.setRequestHeader("content-type", "application/x-www-form-urlencoded");
// Στέλνουμε τα δεδομένα. Στήν πέρίπτωση εδώ στέλνουμε τον κωδικό χώρας.
http.send('country_code='+ countryCode);
// Παρακολουθούμε την κατάσταση του αιτήματος.
http.onreadystatechange = function(){
// Εαν δεν υπάρχουν σφάλματα ...
if(this.readyState == 4 && this.status == 200){
// ... θα ενεργοποιήσουμε το select box cities.
citiesDropDown.removeAttribute('disabled');
// Τα δεδομένα από τον server μας έρχονται σε μορφή JSON και με την
// JSON.parse() θα τα μετατρέψουμε σε javascript object(αντικείμενο).
let results = JSON.parse(this.responseText);
// Και εδώ μέσα στο select cities θα εμφανήσουμε τίς πόλεις που μας στέλνει ο server.
citiesDropDown.innerHTML = `
<option value="">Επιλέξτε την πόλη</option>
${results.map(function(val){
return `<option value='${val}'>${val}</option>`
}).join('')}
`;
}
}
}
script.php
/**
* Θα συμπεριλάβουμε το countries.php αρχείο για να πάρουμε τις πόλεις από τον πίνακα $cities[].
*/
require 'countries.php';
/**
* Εδώ θα πιάσουμε το post request που στέλνουμε από την javasrcipt.
*/
if(isset($_POST['country_code'])){
/**
* ['country_code'] το στέλνουμε με την send() από το script.js, και είναι
* ο κωδικός χώρας.
*/
$country_code = $_POST['country_code'];
/**
* Δημιουργούμε έναν κενό πίνακα
*/
$result = array();
/**
* Παρακάτω φαίνεται λίγο πολύπλοκο αλλά δεν είναι.
* Στον πίνακα $cities θα τρέξουμε τον βρόχο(loop) foreach σε όλα τα κλειδιά.
*/
foreach ($cities as $key => $value) {
// Εάν κάποιο κλειδί του πίνακα είναι ίδιο με την τιμή της χώρας που επιλέξαμε ...
if($key == $country_code){
/**
* ... θα τρέξουμε άλλον έναν βρόχο στήν $cities με index(δείκτη) το κλειδί το οποίο
* κρατάει άλλον έναν πίνακα με τις πόλεις.
* Δείτε πάλι το countries.php στην αρχή του παραδείγματος για να καταλάβετε.
*/
foreach ($cities[$key] as $key => $value) {
// Θα εισάγουμε στον πίνακα $results τις τιμές, δηλ. τις πόλεις.
array_push($result, $value);
}
}
}
// Και τέλος θα στείλουμε πίσω στήν javascript τον πίνακα $results σε μορφή JSON.
echo json_encode($result);
}
Για περισότερες πληροφορίες πάνω στίς συναρτήσεις που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.
Σχόλια και ερωτήσεις μέσω facebook