Let the storm money come!

三级下拉联动代码

  前台页面 js，

 

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>

    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        var fackData; // 数据库，先读取出来

        function Load(selObj, targetObj) {
            $.ajax({
                url: 'GetRegionHandler.ashx',
                data: "pid=" + selObj,
                dataType: 'html',
                contentType: 'application/html;charset=utf-8',
                cache: false,
                success: function(data) {
                    //根据返回值data.d判断是不是成功

                    fackData = data;
                    Change(0, "province");
                    Change($("#province option:selected").val(), "city");
                    Change($("#city option:selected").val(), "area");
                },
                error: function(xhr) {
                    //中间发生异常，查看xhr.responseText
                    alert("异常");
                }
            });
        }

        // 在选择时，改变值
        function Change(parentId, targetObj) {
            var dataRow = fackData.toString().split('@');
             $("#" + targetObj).empty();
             for (var i = 0; i < dataRow.length; i++) {
                 if (dataRow[i] != "") {
                     var dataCells = dataRow[i].toString().split('#');
                     if (dataCells[2] == parentId)
                        $("#" + targetObj).append("<option value='" + dataCells[0] + "'>" + dataCells[1] + "</option>");

                 }
             }
            if (targetObj == "province")
                Change($("#province option:selected").val(), "city");
             if (targetObj == "city")
                Change($("#city option:selected").val(), "area");
        }
    </script>
</head>
<body>
    
    <form id="form1" runat="server">
    <div>
        <select id="province" onchange="Change(this.options[this.options.selectedIndex].value, 'city')"></select>
        <select id="city" onchange="Change(this.options[this.options.selectedIndex].value, 'area')"></select>
        <select id="area"></select>
        <script language="javascript" type="text/javascript">
            Load();
        </script>
    </div>
    </form>
</body>
</html>

 

 

 后台页面代码：

 

代码

namespace DropDownListThreeGrade
{
    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class GetRegionHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["LocalDBConnectionString"].ConnectionString))
            {
                con.Open();
                SqlDataAdapter adapter = new SqlDataAdapter(" select * from region ", con);
                DataSet ds = new DataSet();
                adapter.Fill(ds);
                System.Text.StringBuilder strBack = new System.Text.StringBuilder();

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    strBack.Append(ds.Tables[0].Rows[i]["id"].ToString() + "#" + ds.Tables[0].Rows[i]["name"].ToString() + "#" + 
                        ds.Tables[0].Rows[i]["parentId"].ToString() + "@");
                }
                context.Response.Write(strBack.ToString());
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

 

 

posted @ 2010-03-14 17:45  精密～顽石  阅读(395)  评论(0)  编辑  收藏  举报
在通往地狱的路上，加班能使你更快到达。