最近做项目时用到了省级联动，就想写下来，希望对一些正在为省级联动烦恼的童鞋有点帮助！不喜勿喷哟。。嘻嘻
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; width:974px;}
ul li{ float:left; width:440px; height:56px;}
ul li label{ width: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; width: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{ width:296px;}
.loan_wb{ width:132px;}
.lwb_m{ margin-left:18px;}
.loan_Explain{ padding:20px 0; width:974px; margin:auto; font-size:14px; color:#444;}
.loan_Explain label{ width:120px; text-align:right; color:#444; padding-right:10px; display:inline-block;}
.loan_wc{ width:736px; height:80px;}
.loan_Explain a{ width: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; width: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; width: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;}
