您的位置：首页 > 其它

省市联动

2015-09-01 20:51 381 查看

学校上课时老师实现的省市联动都是通过服务器端控件的IsPostback属性实现的,然而我知道这在实际应用中一点用也没有,选项变一下就刷新一下页面,根本不现实,事实上网上看到的省市联动都是无刷新的.但我不知道怎样实现,没有学过ajax,也没有任何思路,学过ajax后,又想起了这个恋恋不忘的问题,于是自己思索实现了.不知道真正的企业中是怎么实现的,觉得我的方法好像有点绕,不管怎么说,功能是实现了.

我的省市数据都是基于数据库的,数据库就不上了,大体结构如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ProAndCity.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function () {
proInit();//加载省份
$("#<%=ddlPro.ClientID%>").change(selectChange);
selectChange();
});

//省份选项变化事件
var selectChange=function () {
$("#<%=ddlCity.ClientID%>").html("");
var proId = $(this).val()==""?0:$(this).val();
$.post("/CityRequest.ashx", { "proId": proId }, function (data) {
var obj = eval(data);
for (var i = 0; i < obj.length; i++) {
var areaName = obj[i].AreaName;
var areaId = obj[i].AreaId;
$("#<%=ddlCity.ClientID%>").append('<option value="' + areaId + '">' + areaName+ '</option>');
}
});
};

//加载省份
var proInit = function() {
$.post("/ProInit.ashx", function (data) {
var obj = eval(data);
for (var i = 0; i < obj.length; i++) {
var areaName = obj[i].AreaName;
var areaId = obj[i].AreaId;
$("#<%=ddlPro.ClientID%>").append('<option value="' + areaId + '">' + areaName + '</option>');
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:DropDownList ID="ddlPro" runat="server">
</asp:DropDownList>

城市:<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>

</div>
</form>
</body>
</html>

View Code
当然这里完全没必要使用服务器端控件的下拉框,直接使用html控件应该就可以的,我只是为了过一把在JavaScript中找到服务器端控件在客户端对应id而用的,其实就是这个:$("#<%=ddlPro.ClientID%>"),

只是这样实现加载的时候页面出现有延迟能够看到空的下拉框变成有数据的过程,体验很不好,不知道怎么解决,好忧伤.....

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

标签：

相关文章推荐

新的分享

章节导航