Cascade Dropdown List using jQuery/PHP

Question

Question: i have country dropdown list and region dropdown list. Region drop downlist should be populated with values based on the chosen country using jQuery. I googled and tried to solve this problem, but i failed, i couldn't do it. Any simple steps that would help me achieve this?

Here is my snippet:

Basically first page load will populate the drodown lists from db and also store the list in sessions so list can re-used at application level as long as the session is active.

Default countryID and regionID are put in session called $_SESSION['regionID'] and $_SESSION['countryID']

    if(!isset($_SESSION['countryList']))
    {
        $_SESSION['countryList'] = array();
    }

    if(!isset($_SESSION['regionList']))
    {
        $_SESSION['regionList'] = array();
    }

.
.
.
        <form action="index.php" method="GET">
            <label for="lbl_country" id="countrylabel">Country</label>
            <select name="country" id="countrylist" onchange="getRegions(<?php $_SESSION['regionID']; ?>)">
                 <?php
                    //fetch country list from database and store it in session      
                    if(isset($_SESSION['countryList']) && !empty($_SESSION['countryList']))
                    {
                        foreach ($_SESSION['countryList'] as $val)
                        {
                            echo '<option value="'.$val['countryID'].'"';
                            if($_SESSION['countryID'] == $val['countryID'])
                            {
                                echo 'selected';    
                            }
                            echo ">".$val['countryName']."</option>'";
                        }   
                    }
                    else //means the session is not set yet-or-session is empty. Either case, we have to fetch
                    {
                        $query = "SELECT countryID, countryName FROM Country ORDER BY countryID ASC";
                        $results = mysql_query($query);
                        while ($row = mysql_fetch_assoc($results)) 
                        {
                            echo '<option value="'.$row['countryID'].'"';
                            if($_SESSION['countryID'] == $row['countryID'])
                            {
                                echo 'selected';    
                            }
                            echo ">".$row['countryName']."</option>'";

                            $_SESSION['countryList'][] = $row;
                        }   
                    }                   
                ?>
            </select>

            <label for="lbl_region" id="regionlabel">Region</label>
            <select name="region" id="regionlist">
                  <?php     
                    if(isset($_SESSION['regionList']) && !empty($_SESSION['regionList']))
                    {
                        foreach ($_SESSION['regionList'] as $val)
                        {
                            echo '<option value="'.$val['regionID'].'"';
                            if($_SESSION['regionID'] == $val['regionID'])
                            {
                                echo 'selected';    
                            }
                            echo ">".$val['regionName']."</option>'";
                        }   
                    }
                    else
                    {
                        $query = "SELECT regionID, countryID, regionName FROM Region WHERE countryID =".$_SESSION['countryID']." ORDER BY regionID ASC";
                        $results = mysql_query($query);
                        while ($row = mysql_fetch_assoc($results)) 
                        {
                            echo '<option value="'.$row['regionID'].'"';
                            if($_SESSION['regionID'] == $row['regionID'])
                            {
                                echo 'selected';    
                            }
                            echo ">".$row['regionName']."</option>'";

                            //everytime you go to a loop, make sure to put the result in the session
                            $_SESSION['regionList'][] = $row;
                        }   
                    }
                ?>
            </select>
</form>

talha2k · Accepted Answer · 2011-08-21 10:48:19Z

Lets take an easy example, I'm using this and it works perfectly fine.

This is the country dropdown:

<?php
        $countrylist=mysql_query("SELECT * FROM country ORDER BY name ASC");
        echo "<select name='country' id='country' onchange=\"reload(this.form)\" title='Country e:g; United Kingdom,Pakistan'><option value='0'>Select Country</option>";
        while($clist=mysql_fetch_array($countrylist))
        {
        echo "<option value='$clist[Name]'>$clist[Name]</option>"."<br/>";
        }
        echo "</select>";
 ?>

This is the region dropdown:

<select name="region" id="region" ></select>

Now make a seperate file named crlist.js and include it in the page having above code like this:

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

code for crlist.js:

var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
function fillSelect(country,path) {
var url = path+"crlist.php?country=" + country;
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}

function go() {
if (request.readyState == 4) {
//if (request.status == 200) {

var response = request.responseText;

var list=document.getElementById("region");
            for (i = list.length - 1; i>=0; i--) {
                list.remove(i);
            }
var records=response.split('|');
for (i=1; i<records.length; i++) {
    //alert("rcord="+records[i]);
    var record=records[i].split('*');
    var region=record[0];
    //alert("region="+region);
    var regionid=record[1];
    //alert("regionid="+regionid);
    var x=document.createElement('option');
    //var y=document.createTextNode(region);
    x.text=region;
    //x.value=region;
    //alert(x.text);
   //x.appendChild(y);
   //list.appendChild(x);
   list.options.add(x);
   }
  //}
 }
}

function initCs(path) {

if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}
var country=document.getElementById('country');
    country.onchange=function() {

        if(this.value!="Select") {

            var list=document.getElementById("region");
            for (i = list.length - 1; i>=0; i--) {
                list.remove(i);
            }
        //while (list.childNodes[0]) {
        //list.removeChild(list.childNodes[0]);
        //}
        }
        fillSelect(this.value,path);
        //alert(this.value);

    }
//fillSelect(country.value);
}

Now make a seperate file named crlist.php.

Code for crlist.php:

<?php
require_once 'yourconfigfile.php';

$cname = $_GET['country'];

$query="select ID,Name from city where CountryCode=(select code from country where name='$cname') Order By Name ASC";
$res = mysql_query($query) or die(mysql_error());
while($region = mysql_fetch_array($res)){
    echo "<option value='".$region['Name']."'>".$region['Name']."</option>";
}       
?>

Now add following script on the page having dropdowns:

<script  type="text/javascript" src="crlist.js"> </script>
<script>
$(document).ready(function() {

    initCs("");

});
</script>

This is my own script, and i've assumed that you have created country and region tables. But you need to tweak the queries and above code according to your db structure.

Hope this helps.

Collectives™ on Stack Overflow

Cascade Dropdown List using jQuery/PHP

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related