前台页ProAndCity.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProAndCity.aspx.cs" Inherits="ProAndCity" %>
<!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 language="javascript" src="jquery-1[1].3.2.js"></script>
<script language="javascript" type="text/javascript">
/数据库里只有两级,当选择第三级时会出错///
$(document).ready(function() {
var beforeSendMessage = '正在加载,请稍候...';
var ErrorMessage = '<span class="red">对不起,请求错误.请检查您的服务设置或者程序配置.</span>';
//绑定省份下的城市
$('#SelProvince').change(function() {
$('#SelArea').attr('disabled', 'disabled');
AjaxRequstFn('SelProvince', 'SelCity', 'city');
});
//绑定城市下的地区
$('#SelCity').change(function() {
AjaxRequstFn('SelCity', 'SelArea', 'area');
});
//选择地区后给文本框赋值
$('#SelArea').change(function() {
//获取ID为GetArea下的下拉菜单选中的值
var GetText = $('#GetArea > select option:selected').text();
$('#txtArea').val(GetText);
});
function AjaxRequstFn(FID, id, tableName) {
$.ajax({
type: 'GET',
url: 'ProAndCity.aspx',
processData: false,
dataType: 'text',
data: 'id=' + escape($('#' + FID).val()) + '&type=' + tableName,
beforeSend: function(XMLHttpRequest) {
$('#' + id).html(beforeSendMessage);
},
success: function(data, textStatus) {
FormatData(data, id); //格式化字符串
},
complete: function(XMLHttpRequest, textStatus) {
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#showResult').html(ErrorMessage);
}
});
}
});
//格式化字符串
function FormatData(data, id) {
var items = data.split('$');
var value = '';
var text = '';
for (var i = 0; i < items.length; i++) {
value = items[i].substr(0, items[i].indexOf("|"));
text = items[i].substr(items[i].indexOf("|")+1,items[i].length);
$('#' + id).append('<option value="' + value + '">' + text + '</option>');
}
$('#' + id).removeAttr('disabled');
}
</script>
<style type="text/css">
#province{ width:90px; margin-left:5px}
#city{ width:130px; margin-left:5px}
#hometown{ width:160px; margin-left:5px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="GetArea">
<h3>这是ID为GetArea下的下拉菜单</h3>
<select id="SelProvince" runat="server">
</select>
<select id="SelCity" disabled="disabled">
<option value="请选择城市">==请选择城市==</option>
</select>
<select id="SelArea" disabled="disabled">
<option value="请选择地区">==请选择地区==</option>
</select><br /><br />
获取ID为GetArea下的下拉菜单选中的值:<input id="txtArea" type="text" value="" />
<div id="showResult">
</div>
</div>
</form>
</body>
</html>
后台页ProAndCity.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class ProAndCity : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
bindPro();
string id = string.Empty;
string type = string.Empty;
if (Request["id"] != null)
{
id = Request["id"].ToString();//获取父类型编号()
string sql = "select [id],[name] from n_area where [parent_id]=" + id + "";
using (SqlConnection con = new SqlConnection("server=.;database=db_study;uid=sa;pwd=123;"))
{
con.Open();
DataSet ds = new DataSet();
SqlDataAdapter cidr = new SqlDataAdapter();
cidr.SelectCommand = new SqlCommand(sql, con);
cidr.Fill(ds);
con.Close();
string FormatStr = string.Empty;
foreach (DataRow row in ds.Tables[0].Rows)
{
FormatStr += "$" + row.ItemArray[0].ToString()+"|" + row.ItemArray[1].ToString();
}
FormatStr = FormatStr.Substring(1);
Response.Write(FormatStr);
Response.End();
}
}
if (Request["type"] != null)
{
type = Request["type"];//获取表名称
}
}
private void bindPro()
{
using (SqlConnection con = new SqlConnection("server=.;database=db_study;uid=sa;pwd=123;"))
{
con.Open();
string sql = "select * from n_area where parent_id=0";
SqlDataAdapter dr = new SqlDataAdapter();
dr.SelectCommand = new SqlCommand(sql, con);
DataSet ar = new DataSet();
dr.Fill(ar, "pr");
con.Close();
SelProvince.DataSource = ar.Tables[0].DefaultView;
SelProvince.DataTextField = "name";
SelProvince.DataValueField = "id";
SelProvince.DataBind();
}
}
}