<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
bindprovince(); //在加载的时候，绑定省的方法
function bindprovince() {
$.ajax({
type: "post",
contentType: "application/json",
url: "WebService1.asmx/provinceData",
data: "{}",
success: function (result) {
var table = result.d;
var thcount = $(table).find('tr').length; //总共有多少行距
// alert(thcount);
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + ">";
myoption += $(this).children().eq(1).text() + "</option>";
$('#Select1').append(myoption);
});
}
})
}
//下面是绑定市的方法
$('#Select1').change(function () {
var faid = $(this).val();
$('#Select2').children().remove();
//alert(faid);
$.ajax({
type: "post",
url: "WebService1.asmx/cityData",
data: "{faid:'" + faid + "'}",
success: function (result) {
var table = result.d;
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + " >";
myoption += $(this).children().eq(1).text();
myoption += "</option>";
$('#Select2').append(myoption);
});
}
})
})
//下面是绑定县的方法
$('#Select2').bind("change",function () {
$('#Select3').children().remove();
$.ajax({
type: "post",
url: "WebService1.asmx/xianData",
data: "{faid:'" + $(this).val() + "'}",
success: function (result) {
var table = result.d;
$(table).find('tr').each(function () {
var myoption = "<option value=" + $(this).children().eq(0).text() + ">";
myoption += $(this).children().eq(1).text() + "</option>";
$('#Select3').append(myoption);
})
}
})
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="mydiv">
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="DropDownList3" runat="server">
</asp:DropDownList>
<div>
<input id="Text1" type="text" /><br />
省：<select id="Select1">
<option>--请选择--</option>
</select>
市：<select id="Select2">
<option>--请选择--</option>
</select>
县：<select id="Select3">
<option>--请选择--</option>
</select>
</div>
</div>
</form>
</body>
</html>
WebService1.asmx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Text;
using System.Data.sqlClient;
namespace AJaxPCA
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolBoxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
[WebMethod]
public string provinceData()
{
string constr = "select provinceID,province from province";
DataTable dt = sqlhelper.getDate(constr,CommandType.Text);
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DataRow row in dt.Rows)
{
sb.Append("<tr><td>");
sb.Append(row["provinceID"].ToString() + "</td><td>");
sb.Append(row["province"].ToString() + "</td></tr>");
}
sb.Append("</table>");
return sb.ToString();
}
[WebMethod]
public string cityData(string faid)
{
string str = "select cityID,city from city where father=@fid";
DataTable dt = sqlhelper.getDate(str,CommandType.Text,new sqlParameter("@fid",faid));
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DataRow row in dt.Rows)
{
sb.Append("<tr>");
sb.Append("<td>" + row["cityID"].ToString() + "</td>");
sb.Append("<td>" + row["city"].ToString() + "</td>");
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();
}
[WebMethod]
public string xianData(string faid)
{
string str = "select areaID,area from area where father=@fid";
DataTable xdt = sqlhelper.getDate(str,faid));
StringBuilder sb = new StringBuilder();
sb.Append("<table>");
foreach (DataRow row in xdt.Rows)
{
sb.Append("<tr>");
sb.Append("<td>" + row["areaID"].ToString() + "</td>");
sb.Append("<td>" + row["area"].ToString() + "</td>");
sb.Append("</tr>");
}
sb.Append("</table>");
return sb.ToString();
}
}
}
sqlhelp类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Configuration;
using System.Data;
using System.Data.sqlClient;
namespace AJaxPCA
{
public class sqlhelper
{
private static string constr = ConfigurationManager.ConnectionStrings["sqlPCA"].ConnectionString;
/// <summary>
/// 得到数据以datatable的形式返回
/// </summary>
/// <param name="sqltext">执行的命令文本</param>
/// <param name="commandtype">命令类型</param>
/// <param name="sq">命令参数</param>
/// <returns></returns>
public static DataTable getDate(string sqltext,CommandType commandtype,params sqlParameter[] pms)
{
DataTable dt = null;
using (sqlConnection con = new sqlConnection(constr))
{
using (sqlCommand com = con.CreateCommand())
{
com.CommandText = sqltext;
com.Parameters.AddRange(pms);
sqlDataAdapter da = new sqlDataAdapter(com);
dt = new DataTable();
da.Fill(dt);
}
}
return dt;
}
}
}
------------------------------------------------有刷新 web版------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.sqlClient;
using System.Data;
namespace YProject
{
public partial class YRegister : System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
if (!this.Page.IsPostBack)
{
getddlProvinceDataBind(); //页面首次加载执行省份绑定
}
}
public DataSet getDataSet(string sql) //自定义方法，sql语句参数，返回DataSet数据集
{
string connection = ConfigurationManager.ConnectionStrings["sqlcon"].ConnectionString;
sqlConnection conn = new sqlConnection(connection);
sqlDataAdapter sda = new sqlDataAdapter(sql,conn);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
public void getddlProvinceDataBind() //省份数据绑定
{
string sqlProvince = "SELECT * FROM province";
DropDownList1.DataSource = getDataSet(sqlProvince);
DropDownList1.DataTextField = "province";
DropDownList1.DataValueField = "provinceID";
DropDownList1.DataBind();
DropDownList1.Items.Insert(0,new ListItem("--省份--","0"));
}
protected void DropDownList1_SelectedIndexChanged(object sender,EventArgs e)
{
//第一层，省份选择事件
{
int ProvinceID = Convert.ToInt32(DropDownList1.SelectedValue);
if (ProvinceID > 0)
{
string sqlCity = "SELECT * FROM city WHERE father=" + ProvinceID + ""; //根据省份ID找城市
DropDownList2.DataSource = getDataSet(sqlCity);
DropDownList2.DataTextField = "city";
DropDownList2.DataValueField = "cityID";
DropDownList2.DataBind();
DropDownList2.Items.Insert(0,new ListItem("--请选择城市--","0"));
}
else
{
DropDownList2.Items.Clear();
DropDownList2.Items.Insert(0,"0"));
DropDownList2.Items.Clear();
DropDownList2.Items.Insert(0,new ListItem("--请选择县区--","0"));
}
}
}
protected void DropDownList2_SelectedIndexChanged(object sender,EventArgs e)
{
//第二层，城市件
{
int CityID = Convert.ToInt32(DropDownList2.SelectedValue);
if (CityID > 0)
{
string sqlDistrict = "SELECT * FROM area WHERE father=" + CityID + ""; //根据城市ID找县区
DropDownList3.DataSource = getDataSet(sqlDistrict);
DropDownList3.DataTextField = "area";
DropDownList3.DataValueField = "areaID";
DropDownList3.DataBind();
DropDownList3.Items.Insert(0,"0"));
}
else
{
DropDownList3.Items.Clear();
DropDownList3.Items.Insert(0,"0"));
}
}
}
protected void DropDownList3_SelectedIndexChanged1(object sender,EventArgs e)
//第三层，县区选择事件
{
int ProvinceID = Convert.ToInt32(DropDownList1.SelectedValue);
int CityID = Convert.ToInt32(DropDownList2.SelectedValue);
int DistrictID = Convert.ToInt32(DropDownList3.SelectedValue);
//if (ProvinceID > 0 && CityID > 0 && DistrictID > 0)
//{
// Response.Write("您选择的省份ID：" + ProvinceID + "城市ID：" + CityID + "县区ID：" + DistrictID + "");
//}
}
} }
原文链接：https://www.f2er.com/ajax/166345.html