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

时间:2012-06-27 10:16:13

标签: jquery asp.net-mvc-3 kendo-ui

我在视图中有两个下拉列表。一个是国家,另一个是国家。当我点击并选择一个国家/地区时,该国家/地区的相应国家/地区必须出现在州下拉列表中 我正在使用kendo下拉列表,并且能够使用kendo数据源获取下拉值 我使用以下功能进行过滤,但数据未被过滤。 我可以帮助我哪里出错或建议我如何做到这一点

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

                  }
             });

谢谢!

1 个答案:

答案 0 :(得分:0)

我有这个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>";
                }

        }

我希望它可以帮到你..