从数据库动态读取数据后进行省级联动

最近做项目时用到了省级联动，就想写下来，希望对一些正在为省级联动烦恼的童鞋有点帮助！不喜勿喷哟。。嘻嘻

Html中的代码（是用的Html5哟）

           <ul>
                <li>
                    <div style="float:left;"><label>地区</label></div>
                    <div style="float:left; margin-top:10px;" >
                        <div class="loa_lire" style=" float:left;">
                            <input name="" type="text" placeholder="" class="loan_input loan_wb province" value="省" id="province" readonly="readonly" /><i class="loa_iw loa_pos2 province"></i>
                            <dl class="L_down2 dl_abso2 sheng" tabindex="999" style=" display:none"></dl>
                        </div>
                        <div class="loa_lire" style=" float:left;">
                            <input name="" type="text" placeholder="" class="loan_input loan_wb lwb_m City" value="市" id="City" readonly="readonly" /><i class="loa_iw loa_pos City"></i>
                            <dl class="L_down2 dl_abso2 shi" tabindex="999" style=" display:none"></dl>
                        </div>
                    </div>
                </li> 
            </ul>

  一般处理程序中的代码

public void ProcessRequest(HttpContext context)
    {
        string str_json = string.Empty;
        HttpCookie cookie = context.Request.Cookies["RegisterUser"];
        string action = context.Request["action"]; 
       if (action == "LoansCity")
        {
            str_json = LoansCity(context);/*加载省、市、区/县*/
        } 
        else
        {
            str_json = "数据错误，请稍后再试";
        }

        context.Response.Write(str_json);
        context.Response.End();
    }


 /// <summary>
    /// 加载省、市、区/县
    /// </summary>
    /// <param name="context"></param>
    private string LoansCity(HttpContext context)
    {
        string str_json = "[";
        DataTable loansdt = new DataTable();
        string Parentid= context.Request["Parentid"];
        string sql = string.Format(@"SELECT ID
                                  ,Parentid
                                  ,cnName
                                  ,Orderby
                              FROM TArea   where Parentid={0}", Parentid);

         SqlConnection conn = new SqlConnection(GetConnString());
            try
            {
                conn.Open();
                using (DataSet ds = new DataSet())
                {
                    SqlCommand cmd = new SqlCommand(sql, conn);
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(ds);
                    loansdt =ds.Tables[0];
                }
if (loansdt.Rows.Count > 0)
        {
            for (int i = 0; i < loansdt.Rows.Count; i++)
            {
                if (i == 0)
                {
                    str_json += "{ID:"" + loansdt.Rows[i]["ID"] + "",CityName:"" + loansdt.Rows[i]["cnName"] + ""}";
                }
                else
                {
                    str_json += ",{ID:"" + loansdt.Rows[i]["ID"] + "",CityName:"" + loansdt.Rows[i]["cnName"] + ""}";
                }

            }

            str_json = str_json + "]";
        }
        else
        {
            str_json = "没有数据";
        }
        return str_json;  
            }
            catch (Exception ex)
            {

                throw ex;
            }
 
       
    }

　　

用到的JS

$(document).ready(function () {
 
loansCity(); 
City("0", ".sheng"); 

//窗体加载时加载所有省/市

function City(cityName, type) {

$.post("AreaHandler.ashx", { action: "LoansCity",

Parentid: parentid},
function (data) {
var json = eval('(' + data + ')');
for (var i = 0; i < json.length; i++) {
var dd = "<dd name='" + json[i].ID + "'>" + json[i].CityName + "</dd>";
$(type).append(dd);
};
if (type == ".sheng") {

$(".sheng dd").click(function () {
$(".shi").html("");
$("#City").attr("value", "市");
City($(this).attr("name"), ".shi");
});
}

});
}

function loansCity() {
//加载省/市
$('.province').click(function () {
$(".sheng").css("display", " block").focus();
//点击省时在市一栏中加载相应省的所有市
$(".sheng dd").click(function () {
var t = $(this).html();
$("#province").attr("value", t);
$("#City").attr("value", "市");
$(".sheng").css("display", " none");

});
});
$(".sheng").blur(function () {
$(".sheng").css("display", " none");
});

//显示市、区/县
$('.City').click(function () {
$(".shi").css("display", " block").focus();
$(".shi dd").click(function () {
var t = $(this).html();
$("#City").attr("value", t);
$("#City").attr("name", $(this).attr("name"));
$(".shi").css("display", " none");
});
});
};

$(".shi").blur(function () {
$(".shi").css("display", " none");
});

});

　　

该代码的样式

ul{ font-size:14px; height:56px; line-height:56px; 974px;}
ul li{ float:left; 440px; height:56px;}
ul li label{ 120px; text-align:right; color:#444; padding-right:10px; display:inline-block;}
.loa_lire{position:relative;}
.loa_iw{ position:absolute; border-radius: 0 2px 2px 0; 36px; height:36px; background:#27a8e5 url("../../Image/I%27ll%20investImg/loicon.png") center no-repeat;}
.loa_pos{ top:1px; right:1px;}
.loa_pos2{ top:1px; left:109px;}
.loa_pos3{ top:11px; right:1px;}


.loan_input{background:#fff; border: 1px solid #ccc; height:36px; display:inline-block; padding:0 6px; font-family: "Microsoft Yahei", "Calibri"; outline: medium none; border-radius:4px;}
.loan_input:hover{ border:1px solid #27a8e5; -webkit-transition:all 0.6s; -moz-transition:all 0.6s; -ms-transition:all 0.6s; -o-transition:all 0.6s; transition:all 0.6s;}
.loan_wa{ 296px;}
.loan_wb{ 132px;}
.lwb_m{ margin-left:18px;}

.loan_Explain{ padding:20px 0; 974px; margin:auto; font-size:14px; color:#444;}
.loan_Explain label{ 120px; text-align:right; color:#444; padding-right:10px; display:inline-block;}
.loan_wc{ 736px; height:80px;}
.loan_Explain a{ 160px; height:36px; background:#00a1e5; font-size:16px; line-height:36px; color:#FFF; text-align:center; border-radius:4px; display:block; margin:24px auto 
10px auto;}
.loan_Explain a:hover{ background:#00aff9;} 
.dl_abso{ position:absolute; top:50px; right:0px;}
.dl_abso2{ position:absolute; top:40px; right:0px; height:200px; overflow-y:scroll;}
.L_down{ border-radius:4px; border:1px solid #ccc; background:#FFF; 308px; font-size:14px;}
.L_down:hover{ border:1px solid #27a8e5; cursor:pointer;}
.L_down dd{ height:32px; line-height:32px; color:#222; text-align:center;}
.L_down dd:hover{ background:#27a8e5; color:#FFF;}
.L_down2{ border-radius:4px; border:1px solid #ccc; background:#FFF; 144px; font-size:14px;}
.L_down2:hover{ border:1px solid #27a8e5; cursor:pointer;}
.L_down2 dd{ height:32px; line-height:32px; color:#222; text-align:center;}
.L_down2 dd:hover{ background:#27a8e5; color:#FFF;}