Ajax 下拉列表联动显示

一般处理程序文件 代码

using System;
using System.Web;
using System.Linq;
using System.Data.Linq;
using System.Text;

public class Xialaliebiao : IHttpHandler {

private MydbDataContext _Context = new MydbDataContext();
public void ProcessRequest (HttpContext context) {
//获取主键值
var sprent = context.Request["sprent"];
//查找数据ID
var var = _Context.ChinaStates.Where(p => p.ParentAreaCode == sprent);
//定义Item集合 为空
string item = null;
StringBuilder builder = new StringBuilder();//调用using System.Text; 用StringBuilder造个对象
if(var.Count()>0)
{
foreach(ChinaStates data in var)
{
//调用集合Item 给其属性赋值
builder.Append("<item code='" + data.AreaCode + "' name='" + data.AreaName + "'/>");
}
}

//送回Xml
item = builder.ToString();//把 item 用tostring() 全部转换成字符串
context.Response.Write("<?xml version='1.0'?>");
context.Response.Write("<root>");
context.Response.Write(item);
context.Response.Write("</root>");
context.Response.End();
}

 

 

HTML界面代码 

 

 

<title></title>
<script src="jquery-1.8.2.min.js"></script>
<script language="javascript">
$(document).ready(function () {
FillProv();
$("#ddlProv").change(function () {
FillCity();//城市下拉列表显示城市信息
})
$("#ddlCity").change(function () {
FillCounty();//区县下拉列表显示区县信息
})
})
//定义城市回调函数
function FillProv (){
$.ajax({
url: "Hand/Xialaliebiao.ashx",
data: { sprent: "0001" },//找到获取值sprent(在一般配置文件里) 0001(根据城市id)
tpye: "POST",
dataType: "XML",
success: function (data) {
$("#ddlProv").empty();//清空下拉列表信息
var items = $(data).find("item");//掉item 集合
for(var i=0;i<items.length;i++)//用for 给每个的赋值
{
var code = $(items).eq(i).attr("code");//给items里任意一个code获取属性
var name = $(items).eq(i).attr("name");//给items里任意一个name获取属性

var $op = $("<option value='" + code + "'>" + name + "</Option>")//找到每个省份的value值(code)给他附上名字
$("#ddlProv").append($op);//给省份下拉列表 添加 名字
}
//加载完省份了。再调用加载城市就没有问题了。
FillCity();//由于用Ajax服务器端和客户端同时运行 上面加载完了省份信息 在这里加载城市信息就不会错了

}//sucess
})//ajax
}
function FillCity() {
var prov=$("#ddlProv").val();
$.ajax({
url: "Hand/Xialaliebiao.ashx",
data: {sprent:prov},
type: "POST",
dataType: "XML",
success: function (data) {
$("#ddlCity").empty();
var items = $(data).find("item");
for(var i=0;i<items.length;i++)
{
var code = $(items).eq(i).attr("code");
var name = $(items).eq(i).attr("name");

var $op = $("<option value='" + code + "'>" + name + "</option>");
$("#ddlCity").append($op);
}
FillCounty();//加载完城市信息 在这里掉区县信息
}//success
})//ajax

}
function FillCounty() {
var city =$("#ddlCity").val();
$.ajax({

url: "Hand/Xialaliebiao.ashx",
data: { sprent: city },
type: "POST",
dataType: "XML",
success: function (data) {
$("ddlCounty").empty();
var items = $(data).find("item");
for (var i = 0; i < items.length;i++)
{
var code = $(items).eq(i).attr("code");
var name = $(items).eq(i).attr("name");
var $op = $("<option value='" + code + "'>" + name + "</option>");
$("#ddlCounty").append($op);
}
}//success
})//ajax
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:DropDownList ID="ddlProv" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCounty" runat="server">
</asp:DropDownList>

</div>
</form>

转载于:https://www.cnblogs.com/tianxuan/p/4756165.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是利用ajax实现三级联动下拉列表的步骤: 1. 在HTML页面中创建三个select标签,分别代表省、市、县(或区)的下拉列表。 2. 在JavaScript中定义一个函数,用于获取省份数据。该函数会向服务器发送一个ajax请求,并将返回的数据填充到省份下拉列表中。 3. 在省份下拉列表中添加一个onchange事件,当用户选择省份时,该事件会触发一个函数。 4. 该函数会向服务器发送一个ajax请求,请求该省份下所有的城市数据,并将返回的数据填充到城市下拉列表中。 5. 在城市下拉列表中添加一个onchange事件,当用户选择城市时,该事件会触发一个函数。 6. 该函数会向服务器发送一个ajax请求,请求该城市下所有的县(或区)数据,并将返回的数据填充到县(或区)下拉列表中。 7. 完成以上步骤后,用户就可以通过选择三个下拉列表来完成三级联动选择。 下面是一个简单的示例代码,仅供参考: HTML代码: ``` <select id="province"></select> <select id="city"></select> <select id="county"></select> ``` JavaScript代码: ``` // 获取省份数据 function getProvince() { $.ajax({ type: "GET", url: "province.json", dataType: "json", success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#province").html(html); getCity(); } }); } // 获取城市数据 function getCity() { var provinceId = $("#province").val(); $.ajax({ type: "GET", url: "city.json", dataType: "json", data: { provinceId: provinceId }, success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#city").html(html); getCounty(); } }); } // 获取县(或区)数据 function getCounty() { var cityId = $("#city").val(); $.ajax({ type: "GET", url: "county.json", dataType: "json", data: { cityId: cityId }, success: function(data) { var html = ""; for (var i = 0; i < data.length; i++) { html += "<option value='" + data[i].id + "'>" + data[i].name + "</option>"; } $("#county").html(html); } }); } $(function() { getProvince(); // 初始化省份数据 $("#province").change(function() { getCity(); // 当省份变化时,获取城市数据 }); $("#city").change(function() { getCounty(); // 当城市变化时,获取县(或区)数据 }); }); ``` 说明: 1. 该示例中使用了jQuery库来简化ajax请求的操作。 2. 省份、城市、县(或区)数据的格式可以自行定义,示例中使用了json格式的数据。 3. 在实际应用中,服务器端需要根据请求参数返回相应的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值