How to make a Cascading Drop Down List in PHP using jQuery

Question

I have database consists of countries and cities.

First Case - Successfully done:

Country list gets populated in drop box on page load
City list gets populated in drop box on page load - populated city list is based on the default country.

Second Case - Couldn't make it:

User changes country
City list will be changed according to selected country

I know i have to use jQuery/Ajax. I tried but i couldn't solve my problem due to my lack of programming experience. My list is fetched from database not XML. I just need a quick solution, i need to keep it simple and stupid.

I'm using regular PHP coding style, not Object-Oriented.

How can i do it? Any related resources will be appreciated.

Rafay · Accepted Answer · 2011-07-28 10:36:08Z

6

$("#country").change(function(){
    $('#city').find('option').remove().end(); //clear the city ddl
    var country = $(this).find("option:selected").text();
    alert(country);
    //do the ajax call
    $.ajax({
        url:'getCity.php'
        type:'GET',
        data:{city:country},
        dataType:'json',
        cache:false,
        success:function(data){

        data=JSON.parse(data); //no need if dataType is set to json
         var ddl = document.getElementById('city');                      

         for(var c=0;c<obj.length;c++)
              {              
               var option = document.createElement('option');
               option.value = obj[c];
               option.text  = obj[c];                           
               ddl.appendChild(option);
              }


    },
        error:function(jxhr){
        alert(jxhr.responseText);

    }
    }); 

});

in your getCity.php

$country = $_GET['city'];

//do the db query here

$query  = "your query";
$result = mysql_query($query);
$temp = array();
while ($row = mysql_fetch_assoc($result)) {

 if(empty($temp))
 {
   $temp=array($row['city']);
 }
 else
 {  
   array_push($temp,$row['city']);
 }

}
echo (json_encode($temp));

answered Jul 28, 2011 at 10:36

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crafter Over a year ago

Please check your code - you are confusing variables data and obj there.

Sadiksha Gautam · Accepted Answer · 2011-07-28 10:16:41Z

1

You can do that by making ajax call on change of select box value by using .change() method of jquery. api.jquery.com/change/

answered Jul 28, 2011 at 10:16

Sadiksha Gautam

5,1826 gold badges43 silver badges71 bronze badges

Comments

Palak Bheda · Accepted Answer · 2013-04-18 11:26:15Z

0

write data instead of obj. It works perfectly fine

answered Apr 18, 2013 at 11:26

Palak Bheda

413 bronze badges

Comments

Klienblat Moshe · Accepted Answer · 2019-09-11 19:59:15Z

index.php

<?php
require_once './db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StackOverFlow</title>

    <script
            src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
    </script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

    <?php
    // In this part of the code i'm building the  select box options
    $sql = "SELECT thana FROM locations group by thana";
    $stmt = $conn->prepare($sql);
    $stmt->execute();
    ?>

    <select name="Thana" class="thana-select-box">
        <option></option>
    <?php
    while ($row = $stmt->fetch()){ ?>
        <option value="<?=$row['thana']?>"><?=$row['thana']?></option>
   <?php } ?>
    </select>

    <select name="Area" class="area-select-box">

    </select>




</body>
</html>

db.php

<?php

$username = 'your username';
$password = 'your password';
$host = 'localhost';
$dbname = 'test';

$conn = new PDO("mysql:host=$host;dbname=$dbname",$username, $password
    ,
    array(
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_PERSISTENT => false,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
    ));

get_options.php

<?php
require_once 'db.php';

$thana = $_REQUEST['thana'];

$sql = "SELECT area FROM locations where thana='$thana'";
$stmt = $conn->prepare($sql);
$stmt->execute();

$options = [];

while ($row = $stmt->fetch()){
    $options[] = $row['area'];

}

echo json_encode($options);

app.js:

$(document).ready( function(){

    $(document).on('change', '.thana-select-box', function(e){

        let fd = new FormData();
        let thana = $(this).val();
        fd.append('thana', thana);
        // In this part of the code according to the selected thana, we are going to fetch
        // the rows from the second table Area, the php will return a json structure that contains the  rows
        // or more with the  Area that belong to thana.

        $.ajax({
            url: "get_options.php",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,

            complete: function (results) {
                try {
                    let str = JSON.parse(results.responseText);
                    updateDOM(str);
                    console.log(str)
                } catch (e) {
                    console.error(e.message);
                }
            },
        });


    });




    updateDOM = (options) => {

        let areaSelectBox = $('.area-select-box');
        let options_dom = '';
        options.map((value)=>{

            options_dom += `<option value="${value}">${value}</option>`;
        });


        areaSelectBox.html ('');
        areaSelectBox.append(options_dom);


    };


});

Collectives™ on Stack Overflow

How to make a Cascading Drop Down List in PHP using jQuery

4 Answers 4

1 Comment

Comments

Comments

index.php

db.php

get_options.php

app.js:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

index.php

db.php

get_options.php

app.js:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related