您的位置：首页 > 其它

Ajax制作的下拉列表三级联动

2016-08-01 16:01 429 查看

HTML部分：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.2.min.js"></script>
<title></title>
<style>
select {
width: 100px;
}
</style>
</head>
<body>

<select id="sel1"></select>
<select id="sel2"></select>
<select id="sel3"></select>

<script type="text/javascript">
//加载时调用第一个列表加载数据的方法
ChinaAjax('0001', '1');

//列表1的选项改变事件
$("#sel1").change(function () {
ChinaAjax($("#sel1 option:selected").val(), '2');
});

//列表2的选项改变事件
$("#sel2").change(function () {
ChinaAjax($("#sel2 option:selected").val(), '3');
});

//通用ajax方法，参数1，parentcode，参数2，需要将数据添加到哪个列表
function ChinaAjax(Pcode, se) {
$.ajax({
url: "China.ashx",
data: { "ParentCode": Pcode },
typt: "post",
dataType: "json",
success: function (data) {
//刷新列表1
if (se == '1') {
$("#sel1").empty();
for (i in data) {
$("#sel1").get(0).options.add(new Option(data[i].name, data[i].code));
}
//会在列表1添加完毕后自动刷新列表2，同时列表2添加完毕后会自动刷新列表3
ChinaAjax($("#sel1 option:selected").val(), '2');
}
//刷新列表2
if (se == '2') {
$("#sel2").empty();
for (i in data) {
$("#sel2").get(0).options.add(new Option(data[i].name, data[i].code));
}
//会在列表2添加完毕后自动刷新列表3
ChinaAjax($("#sel2 option:selected").val(), '3');
}
//刷新列表3
if (se == '3') {
$("#sel3").empty();
for (i in data) {
$("#sel3").get(0).options.add(new Option(data[i].name, data[i].code));
}
}
},
});//sel1.ajax
};
</script>
</body>
</html>
服务端处理程序部分：

<%@ WebHandler Language="C#" Class="China" %>

using System;
using System.Web;
using System.Collections.Generic;

public class China : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
string json = "[";
int count = 0;
var Pcode = context.Request["ParentCode"];
List<ChinaStates> query = new ChinaData().Select(Pcode);

foreach (var data in query)
{
if (count <= 0)
{
json += "{\"name\":\"" + data.AreaName + "\",\"code\":\"" + data.AreaCode + "\"}";
}
else
{

adf7
json += ",{\"name\":\"" + data.AreaName + "\",\"code\":\"" + data.AreaCode + "\"}";
}
count++;
}
json += "]";
context.Response.Write(json);
}

public bool IsReusable
{
get
{
return false;
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航