省市县三级联动无刷新（附带数据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语句，源文件下载