jquery 三级联动
function refreshAreaInfo() {
var provinceId = $("#DropDownListProvince").val();
$.ajax({
type: "get",
contentType: "application/json;utf-8",
url: "AjaxForm.aspx?id=" + provinceId, //这里是要传递的参数，格式为data:"{paraName:paraValue}"
dataType: "json",
success: function(result) {
$("#DropDownListOther").hide();
$("#DropDownListCity").children().remove();
var str = "<option value='-1'>请选择</option>";
$("#DropDownListCity").append(str);
for (var i = 0; i < result.length; i++) {
var option = "<option value='" + result[i].Id + "'>" + result[i].AreaName + "</option>";
$("#DropDownListCity").append(option);
}
},
error: function(msg) {
alert(msg);
}
});
}
function GetCityArea() {
var id = $("#DropDownListCity").val();
$.ajax({
type: "post",
contentType: "application/json;utf-8",
url: "AjaxForm.aspx/RefreshAreaInfo", //这里是要传递的参数，格式为data:"{paraName:paraValue}"
data: "{id:" + id + "}",
dataType: "json",
success: function(result) {
$("#DropDownListOther").show();
$("#DropDownListOther").children().remove();
var str = "<option value='-1'>请选择</option>";
$("#DropDownListOther").append(str);
result = $.parseJSON(result.d);
for (var i = 0; i < result.length; i++) {
var option = "<option value='" + result[i].Id + "'>" + result[i].AreaName + "</option>";
$("#DropDownListOther").append(option);
}
},
error: function(msg) {
alert(msg);
}
});
}
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownListProvince" runat="server" onchange="refreshAreaInfo()">
</asp:DropDownList>
<asp:DropDownList ID="DropDownListCity" runat="server" onchange="GetCityArea()" Width="120">
</asp:DropDownList>
<asp:DropDownList ID="DropDownListOther" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
Ajax后台：
protected void Page_Load(object sender, EventArgs e)
{
string provinceId = Request["id"].ToString();
string data = GetAreaInfo(int.Parse(provinceId));
Response.Write(data);
Response.End();
}
private static string GetAreaInfo(int id)
{
AreaInfoDataClassesDataContext dataContext = new AreaInfoDataClassesDataContext();
var result = from c in dataContext.AreaInfo
where c.parentId == id
select new { c.id, c.areaName };
JavaScriptSerializer Serializer = new JavaScriptSerializer();
string data = Serializer.Serialize(result);
return data;
}
[WebMethod]
private static string refreshAreaInfo(int id)
{
string data = GetAreaInfo(id);
return data;
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本