jquery - 如何根据先前的选择过滤下拉列表

Question

我的视图中有两个下拉列表。一个是国家，另一个是州。当我单击并选择某个国家时，该国家的相应州必须出现在状态下拉列表中我正在使用剑道下拉列表并且能够获取使用剑道数据源的下拉值我使用以下功能进行过滤，但数据没有被过滤。任何人都可以帮助我哪里出错或建议我一些关于如何做到这一点的想法

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);

                  }
             });

谢谢！

Answer 1

我有这个 ajax 代码，请尝试一下，它将完美地在我的网站上运行。我没有 jquery 代码，所以我会给你 AJAX 代码

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>

和这样的html代码

<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>

查询是

<?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>";
                }

        }

我希望它可以帮助你..