ajax三级联动省市选择器

前端之家收集整理的这篇文章主要介绍了ajax三级联动省市选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前台

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajax省市选择器.aspx.cs" Inherits="ajax.ajax省市选择器" %>

<!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="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/GetProvince",
data: "{}",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
var a = "<option value='" + data.d[i].provinceID + "'>" + data.d[i].provinceName + "</option>";
$("#Select1").append(a);
}
}
})
$("#Select1").change(function () {
$("#Select2 option").remove();
$.ajax({
type: "post",
url: "WebService1.asmx/GetCity",
data: "{father:'" + $("#Select1").val() + "'}",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
var a = "<option value='" + data.d[i].cityID + "'>" + data.d[i].cityname + "</option>";
$("#Select2").append(a);
}
}
})
})
$("#Select2").change(function () {
$("#Select3 option").remove();
$.ajax({
type: "post",
url: "WebService1.asmx/Getarea",
data: "{father:'" + $("#Select2").val() + "'}",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
var a = "<option value='" + data.d[i].father + "'>" + data.d[i].areaname + "</option>";
$("#Select3").append(a);
}
}
})
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="Select1">

</select>
<select id="Select2">
<option>---请选择---</option>
</select>
<select id="Select3">
<option>---请选择---</option>
</select>
</div>
</form>
</body>
</html>
asmx:

[WebMethod] public List<Model.province> GetProvince() { BLL.province p = new BLL.province(); return p.GetModelList(""); } [WebMethod] public List<Model.city> GetCity(string father) { BLL.city c = new BLL.city(); return c.GetModelList(" father=" + father); } [WebMethod] public List<Model.area> Getarea(string father) { BLL.area a = new BLL.area(); return a.GetModelList(" father="+father); }

猜你在找的Ajax相关文章