省市县三级联动无刷新（附带数据sql）
网站找了很多别人的，感觉用起来很不舒服自己动手写了一个
1.不使用服务器控件，后台Ajax处理返回结果，前台jQuery调用，
2.便于修改，js只用一个函数搞定
3.省市县都在一个表里面，直接执行sql即可
前台页面如下
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProvinceCity.aspx.cs" Inherits="ProvinceCity" %>
<!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 type="text/javascript" src="Scripts/jquery-1.7.1.min.js">
</script>
<script type="text/javascript">
function selChild(id,val) {
var cityStr = ProvinceCity.GetCity(val).value;
$("#"+id+"").empty(); //清空
$("#" + id + "").append(cityStr); //增加子级别
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="province" name="province" onchange="selChild('city',this.value)">
<option value="1">--请选择省份--</option>
<option value="11">北京</option>
<option value="12">天津</option>
<option value="13">河北</option>
<option value="14">山西</option>
<option value="15">内蒙古</option>
<option value="21">辽宁</option>
<option value="22">吉林</option>
<option value="23">黑龙江</option>
<option value="31">上海</option>
<option value="32">江苏</option>
<option value="33">浙江</option>
<option value="34">安徽</option>
<option value="35">福建</option>
<option value="36">江西</option>
<option value="37">山东</option>
<option value="41">河南</option>
<option value="42">湖北</option>
<option value="43">湖南</option>
<option value="44">广东</option>
<option value="45">广西</option>
<option value="46">海南</option>
<option value="50">重庆</option>
<option value="51">四川</option>
<option value="52">贵州</option>
<option value="53">云南</option>
<option value="54">西藏</option>
<option value="61">陕西</option>
<option value="62">甘肃</option>
<option value="63">青海</option>
<option value="64">宁夏</option>
<option value="65">新疆</option>
<option value="71">台湾</option>
<option value="81">香港</option>
<option value="91">澳门</option>
</select>
<select id="city" name="city" onchange="selChild('area',this.value)">
<option value="">--选择市--</option>
</select>
<select id="area" name="area" >
<option value="">--请选择区--</option>
</select>
<br />
</div>
</form>
</body>
</html>
<!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 type="text/javascript" src="Scripts/jquery-1.7.1.min.js">
</script>
<script type="text/javascript">
function selChild(id,val) {
var cityStr = ProvinceCity.GetCity(val).value;
$("#"+id+"").empty(); //清空
$("#" + id + "").append(cityStr); //增加子级别
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="province" name="province" onchange="selChild('city',this.value)">
<option value="1">--请选择省份--</option>
<option value="11">北京</option>
<option value="12">天津</option>
<option value="13">河北</option>
<option value="14">山西</option>
<option value="15">内蒙古</option>
<option value="21">辽宁</option>
<option value="22">吉林</option>
<option value="23">黑龙江</option>
<option value="31">上海</option>
<option value="32">江苏</option>
<option value="33">浙江</option>
<option value="34">安徽</option>
<option value="35">福建</option>
<option value="36">江西</option>
<option value="37">山东</option>
<option value="41">河南</option>
<option value="42">湖北</option>
<option value="43">湖南</option>
<option value="44">广东</option>
<option value="45">广西</option>
<option value="46">海南</option>
<option value="50">重庆</option>
<option value="51">四川</option>
<option value="52">贵州</option>
<option value="53">云南</option>
<option value="54">西藏</option>
<option value="61">陕西</option>
<option value="62">甘肃</option>
<option value="63">青海</option>
<option value="64">宁夏</option>
<option value="65">新疆</option>
<option value="71">台湾</option>
<option value="81">香港</option>
<option value="91">澳门</option>
</select>
<select id="city" name="city" onchange="selChild('area',this.value)">
<option value="">--选择市--</option>
</select>
<select id="area" name="area" >
<option value="">--请选择区--</option>
</select>
<br />
</div>
</form>
</body>
</html>
后台页面
View Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ajax;
using System.Data;
using System.Text;
public partial class ProvinceCity : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
Ajax.Utility.RegisterTypeForAjax(typeof(ProvinceCity));
}
[Ajax.AjaxMethod()]
public string GetCity(string ParentID)
{
StringBuilder sb = new StringBuilder();
sb.AppendFormat("<option value=\"1\">--请选择--</option> ");
DataTable dt = DbHelperSQL.Query(string.Format("select * from Province where ParentID={0} ",ParentID)).Tables[0];
foreach (DataRow dr in dt.Rows)
{
sb.AppendFormat(" <option value=\"{0}\">{1}</option>\n", dr["ID"], dr["CityName"]);
}
return sb.ToString();
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ajax;
using System.Data;
using System.Text;
public partial class ProvinceCity : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
Ajax.Utility.RegisterTypeForAjax(typeof(ProvinceCity));
}
[Ajax.AjaxMethod()]
public string GetCity(string ParentID)
{
StringBuilder sb = new StringBuilder();
sb.AppendFormat("<option value=\"1\">--请选择--</option> ");
DataTable dt = DbHelperSQL.Query(string.Format("select * from Province where ParentID={0} ",ParentID)).Tables[0];
foreach (DataRow dr in dt.Rows)
{
sb.AppendFormat(" <option value=\"{0}\">{1}</option>\n", dr["ID"], dr["CityName"]);
}
return sb.ToString();
}
}
加载时候赋值
<script type="text/javascript">
setCity(10,1001,100101); //修改状态省市区选中状态
function setCity(proID, cityID, countryID) {
$("#province").val(proID);
var cityStr = AddressShow.GetCity(proID).value; //获得市html内容
$("#city").empty(); //市区内容情况
$("#city").append(cityStr); //增加子级别
$("#city").val(cityID); //赋值城市
var countryStr = AddressShow.GetCity(cityID).value; //获得县html内容
$("#area").empty();
$("#area").append(countryStr);
$("#area").val(countryID);
}
setCity(10,1001,100101); //修改状态省市区选中状态
function setCity(proID, cityID, countryID) {
$("#province").val(proID);
var cityStr = AddressShow.GetCity(proID).value; //获得市html内容
$("#city").empty(); //市区内容情况
$("#city").append(cityStr); //增加子级别
$("#city").val(cityID); //赋值城市
var countryStr = AddressShow.GetCity(cityID).value; //获得县html内容
$("#area").empty();
$("#area").append(countryStr);
$("#area").val(countryID);
}
源代码里面附有数据库和执行的sql语句，源文件下载
个人签名：天行健，君子以自强不息
