jquery 實現(xiàn)二級/三級/多級聯(lián)動菜單的思路及代碼
2024-05-06 14:18:57
供稿：網(wǎng)友
本文介紹使用jQuery的AJAX功能和asp.net來實現(xiàn)省市區(qū)的三級聯(lián)動效果，其他二級、三級或多級聯(lián)動也可以按照此方法完成。
文章中涉及到的數(shù)據(jù)表為City,為方便管理。
設(shè)計此表如下
ID：自增長字段
City_Name:城市名稱
City_Code:城市代碼
我們根據(jù)城市代碼來查詢省、市、區(qū)。城市代碼結(jié)構(gòu)大致如下：
內(nèi)蒙古：150000，呼和浩特：150100，新城區(qū)：150101。
其他地區(qū)代碼與此一樣，省級為省級編號+0000，市級為省級編號+市級編號+00，地區(qū)為省級編號+市級編號+地區(qū)編號。
City.ASPX代碼為：
代碼如下:
<!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>jQuery + ASP.NET實現(xiàn)三級聯(lián)動</title>
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<style type="text/css">
#dpCity{ display:none; position:relative;}
#dpArea{ display:none;position:relative;}
</style>
</head>
<body>
<div>
?。?lt;asp:DropDownList ID="dpProvince" runat="server"></asp:DropDownList>
市：<asp:DropDownList ID="dpCity" runat="server"></asp:DropDownList>
區(qū)：<asp:DropDownList ID="dpArea" runat="server"></asp:DropDownList>
</div>
</body>
</html>
JS代碼：
代碼如下:
jQuery(document).ready(function () {
var dp1 = jQuery("#dpProvince");
var dp2 = jQuery("#dpCity");
var dp3 = jQuery("#dpArea");
//填充省的數(shù)據(jù)
loadAreas("", "dpProvince");
//給省綁定事件，觸發(fā)事件后填充市的數(shù)據(jù)
jQuery(dp1).bind("change keyup", function () {
var provinceID = dp1.attr("value");
loadAreas(provinceID, "dpCity");
dp2.fadeIn("slow");
});
//給市綁定事件，觸發(fā)事件后填充區(qū)的數(shù)據(jù)
jQuery(dp2).bind("change keyup", function () {
var cityID = dp2.attr("value");
loadAreas(cityID, "dpArea");
dp3.fadeIn("slow");
});
});
function loadAreas(val, item) {
jQuery.ajax({
type: "post",
url: "CityLoader.asmx/GetCityList",
data: {
code: val,
a: Math.random()
},
error: function () {
return false;
},
success: function (data) {
var i;
var json = eval(data);
jQuery("#" + item).append("<option value='' selected='selected'>請選擇</option>");
for (i = 0; i < json.length; i++) {
jQuery("#" + item).append(jQuery("<option></option>").val(json[i].c_code).html(json[i].c_name));
};
}
});
}
后臺代碼：
代碼如下:
//實例類
public class CityModel
{
int _id;
string _cityname;
string _citycode;
public int ID
{
set { _id = value; }
get { return _id; }
