How to filter a drop down list based on previous selection

Question

I am having two dropdown lists in my view.One is country and another is State.When i click on and select some Country,the respective States of that country must appear in the State dropdown I am using kendo dropdown list and was able to fetch the dropdown values using kendo datasource i used the following functionality for filtering,but data is not getting filtered. Could any help me where i went wrong or suggest me some idea on how to do this

enter code here

      var sourcedata = new kendo.data.DataSource({

                  type: "odata",
                  serverFiltering: true,

                  transport: {

                      read:

                      {
                          url: "/Home/State",
                          type: "POST"
                      }
                  }
              });

              $("#cnty").kendoDropDownList({
                  optionLabel: "Select category...",
                  dataTextField: "ct",
                  dataValueField: "country",
                  dataSource: {
                      type: "odata",
                      serverFiltering: true,
                      transport: {
                          read: "/Home/Country"
                      }
                  },
                  change: function () {
                      var value = this.value();

                      if (value) {
                          sourcedata.filter({
                              field: "country",
                              operator: "eq",
                              value: parseInt(value)
                          });
                          st.enable();
                      } else {
                          st.enable(false);
                      }

                      st.select(0);

                  }
             });

Thanks!

Answer 1

i have this ajax code please try this it will run on my site perfectly. i have not jquery code so i will give u AJAX code

function ajaxState()
    {

        var ajaxRequest;
        try
        {
                ajaxRequest = new XMLHttpRequest();
        } 
        catch (e)
        {
                try
                {
                        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } 
                catch (e) 
                {
                        try
                        {
                                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                        } 
                    catch (e)
                    {
                            alert("Your browser broke!");
                            return false;
                    }
                }
        }
        ajaxRequest.onreadystatechange=function()
        {
                if(ajaxRequest.readyState==4)
                {
                        //alert("Response :: "+ajaxRequest.responseText);
                        document.getElementById("statediv").innerHTML=ajaxRequest.responseText;
                }
        }
        var query="ajaxhendler.php?msg=loadstate";
        //alert("Request ::" +query);
        ajaxRequest.open("POST",query,true);
        ajaxRequest.send();
    }

    function loadcity()
    {
                    //alert("i m called")
        var city=document.getElementById("state").value;
            //alert(city);
            var ajaxRequest;

            var ajaxRequest;
            try
            {
                    ajaxRequest = new XMLHttpRequest();
            } 
            catch (e)
            {
                    try
                    {
                            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                    } 
                    catch (e) 
                    {
                            try
                            {
                                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                             } 
                        catch (e)
                        {
                                alert("Your browser broke!");
                                return false;
                        }
                    }
            }

            ajaxRequest.onreadystatechange=function()
            {
                    if(ajaxRequest.readyState==4)
                    {
                            //alert("Response :: "+ajaxRequest.responseText);
                            document.getElementById("city").innerHTML=ajaxRequest.responseText;
                    }
            }
            var query="ajaxhendler.php?msg=loadcity&c="+city;
            //alert("Request ::" +query);
            ajaxRequest.open("POST",query,true);
            ajaxRequest.send();     

    }
</script>

and html code like this

<body onLoad="ajaxState()">
<table>
 <tr>

     <td>State :</td>
    <td><div id="statediv"/></td>
 </tr>
 <tr>
     <td>City :</td>
     <td><div id="city"/></td>
 </tr>

</table>

and query is

<?php 
$msg=$_GET['msg'];

if($msg=='loadstate')
{
    load_state();
}
if($msg=='loadcity')
{
    load_city();
}

function load_state()
        {
                $cn=mysql_connect("localhost","root","");
                mysql_select_db("per_info",$cn);
                $query="SELECT * FROM tbl_state WHERE loc_parent =0";


                if($rs=mysql_query($query))
                {
                        echo "<select name=\"state\" id=\"state\" onchange=\"loadcity()\">
                                    <option value=\"\">Select State</option>";
                        while($row=mysql_fetch_array($rs))
                        {
                                echo "<option value=\"".$row[loc_id]."\">".$row[loc_name]."</option>";
                        }
                        echo "</select>";
                }
                else
                {
                        echo "error";
                }
        }
//========================================================display city in <select>============================================      
        function load_city()
        {
                $state=$_GET['c'];

                $cn=mysql_connect("localhost","root","");
                mysql_select_db("per_info",$cn);

                $query="SELECT * 
                        FROM tbl_state 
                        WHERE loc_parent = ".$state;
                if($rs=mysql_query($query))
                {
                        echo "<select name=\"city\" id=\"city\">
                                    <option value=\"\">Select City</option>";
                        while($row=mysql_fetch_array($rs))
                        {

                                echo "<option value=\"".$row[loc_id]."\">".$row[loc_name]."</option>";
                        }
                        echo "</select>";
                }

        }

I hope that it may help you..