用getJSON写联动下拉框

   这是我在这里的第一篇随笔，只是把在实践过程中学习到的方法做下总结，所谓条条大路通罗马，所以可能由于这篇笔记的原因，在实践中用到的getjson实现下拉框联动的方法可能就要换另外一种方法了。不过没关系，效果是一样的。

  首先在.JS文件中写以下代码： 

 1function GetCity() {
 2    $("#ddlCity").empty(); //清空市SELECT控件
 3    var url ="CitySelect.ashx?cityid=-1";
 4    $.getJSON(url, function(data) {
 5        $.each(data, function(i, item) {
 6            $("<option></option>")
 7                .val(item.CityId)
 8                .text(item.CityName)
 9                .appendTo("#ddlCity");  //填充下拉框
        });

    $("<option value='-1'>请选择</option>").appendTo("#ddlCity");
    GetDistrict();
    });
}

function GetDistrict() {
    $("#ddlDistrict").empty(); //清空区SELECT控件
    var url = "CitySelect.ashx?cityid="+$("#ddlCity").val();
    $.getJSON(url, function(data) {
        $.each(data, function(i, item) {
            $("<option></option>")
                .val(item.CityId)
                .text(item.CityName)
                .appendTo("#ddlDistrict");
        });
    $("<option value='-1'>请选择</option>").appendTo("#ddlDistrict");
    });
}

   稍微注意的一点是这个.JS文件是和CitySelect.ashx文件放在同一个目录下的，若开放项目时规范化把.JS文件放在特定的 JavaScript目录下，而CitySelect.ashx也放在ashx目录下的话，那代码中的url就要改成：var url ="/Web/ashx/CitySelect.ashx?cityid=-1";

   CitySelect.ashx文件返回需要的JSON格式的数据：

 1
 2        string cityId = context.Request.Params["cityid"];
 3        IList<City> modellist = new List<City>();
 4        DataTable dt = createCity.GetAll();
 5        string sb = "[";
 6        int i = 1;
 7        
 8        if (cityId != "-1" && cityId != "")
 9        {//填充区SELECT下拉框
            DataRow[] rows = dt.Select(string.Format("PaterId='{0}'", cityId));
            //找到选择市的区域
            foreach (DataRow row in rows)
            {
                sb += "{" + "\"" + "CityId" + "\"" + ":";
                sb += "\"" + row["CityId"].ToString() + "\"" + ",";
                sb += "\"" + "CityName" + "\"" + ":";
                sb += "\"" + row["CityName"].ToString() + "\"" ;
                if (i == dt.Rows.Count - 1) //判断是否是最后一条记录
                    sb += "}]";
                else
                    sb += "},";

                i += 1;

            }
        }
        else
        {//填充市SELECT下拉框
            DataRow[] rows = dt.Select("PaterId='-1'");
            foreach (DataRow row in rows)
            {
                i = 1;
                sb += "{" + "\"" + "CityId" + "\"" + ":";
                sb += "\"" + row["CityId"].ToString() + "\"" + ",";
                sb += "\"" + "CityName" + "\"" + ":";
                sb += "\"" + row["CityName"].ToString() + "\"";
                if (i == rows.Length)
                    sb += "}]";
                else
                    sb += "},";
                i += 1;
            }
        }

        context.Response.Write(sb);//返回JSON格式的数据 　

  在前台页面导入jquery-1.3.2.min.js文件并写以下代码：

 1<script type="text/javascript">
 2            $(document).ready(function() {
 3                GetCity();
 4                $("#ddlCity").change(function() { 
 5                        if($("#ddlCity").val() !='-1')
 6                        {
 7                            $("#ddlDistrict").removeAttr("disabled");
 8                            //使区下拉框可用
 9                            GetDistrict(); 
10                        }
11                        else
12                        {
13                            $("#ddlDistrict").attr("disabled","disabled");
14                            //设置市下拉框没有设置时区下拉框不可用
15                            $("#ddlDistrict").attr("value","-1");
16                        }
17                    });
18            });            
19    </script>

  这样就实现了市区下拉框的联动啦!这里的第一篇随笔写得有点费劲,编辑器使用还不熟悉,这样实现联动性基本没有什么问题,但若有什么不足之处,请高手指点.