How to Make a Cascading Drop Down List in PHP Using Jquery

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

$("#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));

Display Data from a dependent dropdown in php

Have you tried running the while loop without breaking the PHP script? It seems you are almost trying to run a for loop.

<?php
    $sql="SELECT * FROM `Products` WHERE TYPE = 'BULK'";
    $results=$dbhandle->query($sql); 
    while($rs=$results->fetch_assoc()) { 
        echo '<option value="' . $rs["pid"] . '">' . $rs["Name"] . '</option>';

    }
?>

UPDATE

Okay, so I heard your comment, and I have used an ajax call to get the full display of the content; I was not really sure as to what you were trying to do with your showMsg() function. I was assuming you were wanting to create a new query request.

So I changed the function to create an Ajax call that would look something along these lines:

<script>
function showMsg()
{
    var val;
    val = $("#state-list").val();
    $.ajax({
        type: "POST",
        url: "table.php",
        data: "state_id="+val,
        success: function(data){
            $("#msgC").html(data);
        }
    });
}
</script>

And then table.php would be along these lines...

<?php
// check to see if state_id has been submitted
if(isset($_POST['state_id']))
{
    $state_id = $_POST['state_id'];
}
// if it is not set, add something in place.
else
{
    $state_id = "1";
}

// query goes here - ask for the ID
$query = "SELECT name, email from fieldo where state = " . $state_id;

$results = $dbhandle->query($query);
while($rs=$results->fetch_assoc()) {

    //... create table with all content;

}

?>

cascading dropdown menu with sql ajax

You need to create a two more table zipcode and streets and add a city_id in zipcode table and zip_id in streets table

 <select name="zipcode" id="zipcode">
     <option value="">Select Zipcode first</option>
 </select>

 <select name="streets" id="streets">
      <option value="">Select Streets first</option>
 </select>

Jquery Scrtipt

$('#city').on('change',function(){
    var cityId = $(this).val();
    if(cityId){
        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'city_id='+cityId,
            success:function(html){
                $('#zipcode').html(html);
            }
        }); 
    }else{
        $('#zipcode').html('<option value="">Select zipcode first</option>'); 
    }
});
});

$('#zipcode').on('change',function(){
    var zipId = $(this).val();
    if(zipId){
        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'zip_id='+zipId,
            success:function(html){
                $('#streets').html(html);
            }
        }); 
    }else{
        $('#streets').html('<option value="">Select Streets first</option>'); 
    }
});
});

Php code is same as state just need to change table name and fields

By using this you get the cascading dropdown menu of zipcode and streets.

How to populate a cascading Dropdown with JQuery

It should as simple as

jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn){
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');
        $locations.html(html)
    });
});

Demo: Fiddle

Issue with JQuery Country and State cascading dropdown showing all states until country dropdown changed

Refreshing the country list should be as easy as calling jQuery('select[name="country"]').trigger('change') after setting up the listener, the only caveat is that you'll lose the current state selection, since you'll be emptying and repopulating it. You can get around that by saving its value first and check if it's present in the new state list.

jQuery(document).ready(function ()
    {
        // Cache the jQuery objects, don't look them up in each access
        var $countrySelector = jQuery('select[name="country"]');
        var $stateSelector = jQuery('select[name="state"]');
        
        $countrySelector.on('change',function(){
            var countryID = $countrySelector.val();
            var stateID = $stateSelector.val();
            
            if(countryID)
            {
                jQuery.ajax({
                    url : '/getStates/' +countryID,
                    type : "GET",
                    dataType : "json",
                    success:function(data)
                    {
                        $stateSelector.empty();
                        jQuery.each(data, function(key,value){
                            // Check if current element matches previous selection
                            $stateSelector.append(
                                `<option value="${key}"${key == stateID ? ' selected' : ''}>${value}</option>`
                            );
                        });
                    }
                });
            }
            else
            {
                $stateSelector.empty();
            }
    });
    
    // After document is loaded and handler set up, fire the handler
    $countrySelector.trigger('change');
});

Further reference for template literals.

---

Related Topics