三级下拉联动代码
前台页面 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;
}
}
}
}
走向地狱的途中，不小心走了程序员这条路，路上一个个黑心的老板，和暗无天日的加班，我才发现，通往地狱的路径中，我们这行是最短的。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· SQL Server 2025 AI相关能力初探
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库