//示例实现省市的二级无刷新联动选择省名连接服务器动态加载市名
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxCity.aspx.cs" Inherits="AjaxCity" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>根据省名获取市名</title>
<script type="text/javascript">
var xmlHttp;
//创建XMLHttpRequest 对象
function createHttp()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlHttp = new XMLHttpRequest();
}
}
function showCity()
{
var url = "ShowCity.aspx?id="+document.getElementById("province").value;
//创建XMLHttpRequest对象
createHttp();
//指定服务器响应函数
xmlHttp.onreadystatechange=showRes;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function showRes()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
addCity();
}
}
}
//根据省名添加市名
function addCity()
{
var citys = document.getElementById("city");
clearOptions(citys);
//获取服务器响应数据
var txt = xmlHttp.responseText;
var res=txt.split(",");
//添加新数据
for(var i=0;i<res.length;i++)
{
var opt = document.createElement("option");
opt.text=res[i];
opt.value=i;
citys.options.add(opt);
}
}
//清除历史记录
function clearOptions(citys)
{
for( var i=citys.options.length;i>-1;i--)
{
citys.options.remove(i);
}
}
</script>
</head>
<body>
<select id="province" runat="server" style="width: 141px" onchange="showCity();">
<option selected="selected" value="1">湖北</option>
<option value="2">江苏</option>
<option></option>
</select>
<select id="city" runat="server" style="width: 139px">
<option selected="selected"></option>
</select>
</body>
</html>
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Text;
using System.IO;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class ShowCity : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string id = Request.QueryString["id"].ToString();
this.ShowInfo(id);
}
}
/// <summary>
/// 根据省的编号查询 市的名称
/// </summary>
/// <param name="id"></param>
private void ShowInfo(string id)
{
SqlConnection con = new SqlConnection("Data source =(local);Initial Catalog=master;Integrated Security=SSPI");
SqlCommand cmd = new SqlCommand("select * from city where pid=" + int.Parse(id), con);
con.Open();
SqlDataReader read = cmd.ExecuteReader();
StringBuilder str = new StringBuilder();
while (read.Read())
{
str.Append(read["cityName"].ToString() + ",");
}
Response.Write(str);
}
}