Πίσω στο ευρετήριο

Autofill select combo box Posted: 27-Feb-2020 00:10 AM

php, javascript, html tutorial
Δες το Demo Κατέβασε τα αρχεία 2 downloads

Είναι πολλές φορές που θέλουμε ένα συνδυασμό από 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

Παρόμοια javascript tutorials

Image preview with javascript 19-Feb-2020 16:04 PM Άμεση απεικόνιση της εικόνας σε file upload ενέργεια javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password. Autofill select combo box 27-Feb-2020 00:10 AM Θα δούμε πως μπορούμε να συνδυάσουμε δυο select drop-down menu έτσι ώστε επιλέγοντας το πρώτο να δίνουμε τις ανάλογες τιμές στο δεύτερο.

php Tutorials

Register form with php and ajax 24-Feb-2020 16:39 PM Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση. Image upload with php 17-Feb-2020 18:17 PM Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση. Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload. Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων.

css Tutorials

Highlight selected menu page 12-Mar-2020 11:56 AM Έχουμε ένα οριζόντιο μενού όπου θα αλλάζουμε το background-color του link στην επιλεγμένη σελίδα. Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript. Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll.

webDev Αναφορές

PHP Net Το σπίτι της php είναι η πιο έγκυρη πηγή εκμάθησης. Javascript Μozilla MDN web docs Τα πάντα για την Javascript. Όρεξη να έχεις να διαβάζεις. CSS Μozilla MDN web docs Απο βασικά styles εως animation, εδω θα τα μάθεις όλα. Programming Notes for Professionals Μια φοβερή συλλογή από PDF αρχεία, από Android εώς C++. Αξίζει να κατεβάσετε και να μελετήσετε τα αρχεία.

PHPDev Tutorials | Site developed by PHPDev.gr Visit PHPDev

scrollTo('top')