ajax请求下拉框数据
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OptionAjax.aspx.cs" Inherits="OptionAjax" %>
<!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>ajax请求下拉框数据</title>
<script src="common/common.js" type="text/javascript"></script>
<script type="text/javascript">
var xhr = false;
window.onload = function () {
xhr = createXmlHttp();
//alert(nationData[2].id);
initNations();
}
//<option value="1">中国</option>
//国家 数组
var nationData = [
{ "id": "1", "name": "中国"},
{ "id": "2", "name": "美国"},
{ "id": "3", "name": "日本"}
];
//为国家下拉框 填充数据
function initNations() {
for (i = 0; i < nationData.length; i++) {
var nowNation = nationData[i];
var option = new Option(nowNation.name, nowNation.id);
gel("selNation").options.add(option);
}
}
function nationChange(nId) {
xhr.open("get", "OptionAjax.aspx?nid=" + nId, true);
xhr.setRequestHeader("If-Modified-Since", "0");//不使用浏览器缓存
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var res = xhr.responseText;
var jsons = eval("(" + res + ")");
var selPro = gel("selPro"); //为了 避免每次循环 都去dom数遍历查找 下拉框一遍，所以先查出来
//清空 原有选项
selPro.options.length = 0;
for (i = 0; i < jsons.length; i++) {
var nowPro = jsons[i];
var option = new Option(nowPro.name, nowPro.id);
selPro.options.add(option);
}
}
}
}
xhr.send(null);
}
</script>
</head>
<body>
国家：<select id="selNation" onchange="nationChange(this.value)"></select><br />
省：<select id="selPro"></select>
</body>
</html>
。。。。。。。后台代码：。。。。。。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class OptionAjax : System.Web.UI.Page
{
/// <summary>
/// 省 数据
/// </summary>
List<MODEL.Province> list = new List<MODEL.Province>() {
new MODEL.Province(){ Id=1, Name="台湾省", NId=1},
new MODEL.Province(){ Id=2, Name="湖南省", NId=1},
new MODEL.Province(){ Id=3, Name="西藏", NId=1},
new MODEL.Province(){ Id=1, Name="夏威夷", NId=2},
new MODEL.Province(){ Id=2, Name="新泽西", NId=2},
new MODEL.Province(){ Id=3, Name="大板", NId=3},
new MODEL.Province(){ Id=1, Name="东京", NId=3}
};
protected void Page_Load(object sender, EventArgs e)
{
//1.接收 国家Id
string strNid = Request.QueryString["nid"];
if (!string.IsNullOrEmpty(strNid))
{
System.Text.StringBuilder sbHtml = new System.Text.StringBuilder("[");
foreach (MODEL.Province m in list)
{
if (m.NId.ToString() == strNid)
{
sbHtml.Append("{ 'id': '"+m.Id+"', 'name': '"+m.Name+"','nid':'"+m.NId+"'},");
}
}
Response.Write(sbHtml.ToString().Substring(0, sbHtml.Length - 1) + "]");
Response.End();
}
}
}
