[Ajax]用简易Ajax框架实现"省市二级联动下拉菜单"【转载】

来源：互联网发布：夏贝贝云盘全套源码编辑：程序博客网时间：2024/05/20 05:11

原文地址：http://www.cnblogs.com/zhulei/archive/2007/06/06/773055.html

操作环境:Visual Studio.Net2003
操作系统:window Xp SP2

利用简易Ajax框架实现无刷新的省市二级联动的下拉菜单.其实很简单.关键在于处理服务器端返回的XML,对其进行拆分就OK了

ASPX页面: MyDropDownList.aspx ,代码如下

<%@ Page language="c#" Codebehind="MyDropDownList.aspx.cs" AutoEventWireup="false" Inherits="AjaxFrmClass.MyDropDownList.MyDropDownList" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>MyDropDownList</title>

//简易AJAX框架CallBackObject.js

function ChooseCity()

{

var f = document.Form1;

var selecteditem = f.drpProvince.value;

var cbo = new CallBackObject();

cbo.OnComplete = Cbo_Complete;

cbo.onError = Cbo_Error;

//将数据传到Ajax.aspx服务器端去处理(Ajax.aspx.cs的代码在下一代码块)

cbo.DoCallBack("Ajax.aspx?ProvinceID="+selecteditem);

}

function Cbo_Complete(responseText, responseXML)

{

//信息已经成功返回，开始处理信息

var returnStr = responseText;

var xmlDom=new ActiveXObject("Microsoft.XmlDom");

xmlDom.loadXML(returnStr);

//Table :返回的XML根节点(如果不知道,可以alert(responseText)看看...)

var newsItems=xmlDom.getElementsByTagName("Table");

将城市的下拉列表清空

document.getElementById("drpCity").length=0;

//循环获取多少条记录

for(var i=0;i<newsItems.length;i++)

{

var newsItem = newsItems[i];

var strID = newsItem.getElementsByTagName("id")[0].text;

var strCity = newsItem.getElementsByTagName("city")[0].text;

//debugger;

//将获取的记录填充到城市的下拉列表中

document.all("drpCity").options.add(new Option(strCity,strID));

}

function Cbo_Error()

{

alert(responseText);

}

</script>

</HEAD>

<body>

<asp:Label id="lbl_Province" runat="server">省份:</asp:Label>

<asp:DropDownList id="drpProvince" runat="server" Width="128px"></asp:DropDownList>

<asp:Label id="lbl_city" runat="server">城市:</asp:Label>

<asp:DropDownList id="drpCity" runat="server" Width="144px"></asp:DropDownList>

</form>

</body>

</HTML>

ASPX页面: MyDropDownList.aspx .cs(主要是先绑定省份的下拉列表),代码如下

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using AjaxFrmClass.Class;

namespace AjaxFrmClass.MyDropDownList

{

/// <summary>

/// MyDropDownList 的摘要说明。

/// </summary>

public class MyDropDownList : System.Web.UI.Page

{

protected System.Web.UI.WebControls.Label lbl_city;

protected System.Web.UI.WebControls.DropDownList drpCity;

protected System.Web.UI.WebControls.Label lbl_Province;

protected System.Web.UI.WebControls.DropDownList drpProvince;

private void Page_Load(object sender, System.EventArgs e)

{

if(!IsPostBack)

{

//调用客户端的方法

this.drpProvince.Attributes.Add("onchange","ChooseCity()");

//绑定省份

this.ProvinceBind();

}

/// <summary>

/// 省份绑定

/// </summary>

public void ProvinceBind()

{

SqlConnection con = new SqlConnection("uid=sa;pwd=1234;database=MyAjaxDB");

SqlCommand cmd = new SqlCommand("select ProvinceID,Province from Province order by ProvinceID asc",con);

con.Open();

SqlDataAdapter MySqlAdapter = new SqlDataAdapter(cmd);

DataSet MyDataSet = new DataSet();

MySqlAdapter.Fill(MyDataSet,"Province ");

this.drpProvince.DataSource = MyDataSet;

this.drpProvince.DataTextField = "Province";

this.drpProvince.DataValueField = "ProvinceID";

this.drpProvince.DataBind();

this.drpProvince.Items.Insert(0,new ListItem("请选择","..."));

}

Web 窗体设计器生成的代码

}

页面:Ajax.aspx; 前台(.aspx)不需要操作,Ajax.aspx.cs: 代码如下

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

namespace AjaxFrmClass.MyDropDownList

{

/// <summary>

/// Ajax 的摘要说明。

/// </summary>

public class Ajax : System.Web.UI.Page

{

protected SqlDataAdapter MyDataAdapter ;

protected SqlDataAdapter MyDataSet;

private void Page_Load(object sender, System.EventArgs e)

{

if(!IsPostBack)

{

string ProvinceID = Request["ProvinceID"].ToString();

if (ProvinceID.Length > 0)

{

Response.Clear();

SqlConnection con = new SqlConnection("uid=sa;pwd=1234;database=MyAjaxDB");

MyDataAdapter

MyDataSet = new DataSet();

MyDataAdapter.Fill(MyDataSet);

string chString = MyDataSet.GetXml();

Response.Clear();

Response.ContentType = "text/xml";

Response.Write(chString);

Response.End();

}

else

{

Response.Clear();

Response.End();

}

else

{

Response.Clear();

Response.End();

}

Web 窗体设计器生成的代码

}

= new SqlDataAdapter("select * from city where father ='"+ProvinceID+"'",con);

数据库: 省份表和城市表(作为文本文档导入表中即可)

省份: 表名 province

id provinceID province

1 110000 北京市

2 120000 天津市

3 130000 河北省

4 140000 山西省

5 150000 内蒙古自治区

6 210000 辽宁省

7 220000 吉林省

8 230000 黑龙江省

9 310000 上海市

10 320000 江苏省

11 330000 浙江省

12 340000 安徽省

13 350000 福建省

14 360000 江西省

15 370000 山东省

16 410000 河南省

17 420000 湖北省

18 430000 湖南省

19 440000 广东省

20 450000 广西壮族自治区

21 460000 海南省

22 500000 重庆市

23 510000 四川省

24 520000 贵州省

25 530000 云南省

26 540000 西藏自治区

27 610000 陕西省

28 620000 甘肃省

29 630000 青海省

30 640000 宁夏回族自治区

31 650000 新疆维吾尔自治区

32 710000 台湾省

33 810000 香港特别行政区

34 820000 澳门特别行政区

城市表:表名 city

id cityID city father

1 110100 市辖区 110000

2 110200 县 110000

3 120100 市辖区 120000

4 120200 县 120000

5 130100 石家庄市 130000

6 130200 唐山市 130000

7 130300 秦皇岛市 130000

8 130400 邯郸市 130000

9 130500 邢台市 130000

10 130600 保定市 130000

11 130700 张家口市 130000

12 130800 承德市 130000

13 130900 沧州市 130000

14 131000 廊坊市 130000

15 131100 衡水市 130000

16 140100 太原市 140000

17 140200 大同市 140000

18 140300 阳泉市 140000

19 140400 长治市 140000

20 140500 晋城市 140000

21 140600 朔州市 140000

22 140700 晋中市 140000

23 140800 运城市 140000

24 140900 忻州市 140000

25 141000 临汾市 140000

26 141100 吕梁市 140000

27 150100 呼和浩特市 150000

28 150200 包头市 150000

29 150300 乌海市 150000

30 150400 赤峰市 150000

31 150500 通辽市 150000

32 150600 鄂尔多斯市 150000

33 150700 呼伦贝尔市 150000

34 150800 巴彦淖尔市 150000

35 150900 乌兰察布市 150000

36 152200 兴安盟 150000

37 152500 锡林郭勒盟 150000

38 152900 阿拉善盟 150000

39 210100 沈阳市 210000

40 210200 大连市 210000

41 210300 鞍山市 210000

42 210400 抚顺市 210000

43 210500 本溪市 210000

44 210600 丹东市 210000

45 210700 锦州市 210000

46 210800 营口市 210000

47 210900 阜新市 210000

48 211000 辽阳市 210000

49 211100 盘锦市 210000

50 211200 铁岭市 210000

51 211300 朝阳市 210000

52 211400 葫芦岛市 210000

53 220100 长春市 220000

54 220200 吉林市 220000

55 220300 四平市 220000

56 220400 辽源市 220000

57 220500 通化市 220000

58 220600 白山市 220000

59 220700 松原市 220000

60 220800 白城市 220000

61 222400 延边朝鲜族自治州 220000

62 230100 哈尔滨市 230000

63 230200 齐齐哈尔市 230000

64 230300 鸡西市 230000

65 230400 鹤岗市 230000

66 230500 双鸭山市 230000

67 230600 大庆市 230000

68 230700 伊春市 230000

69 230800 佳木斯市 230000

70 230900 七台河市 230000

71 231000 牡丹江市 230000

72 231100 黑河市 230000

73 231200 绥化市 230000

74 232700 大兴安岭地区 230000

75 310100 市辖区 310000

76 310200 县 310000

77 320100 南京市 320000

78 320200 无锡市 320000

79 320300 徐州市 320000

80 320400 常州市 320000

81 320500 苏州市 320000

82 320600 南通市 320000

83 320700 连云港市 320000

84 320800 淮安市 320000

85 320900 盐城市 320000

86 321000 扬州市 320000

87 321100 镇江市 320000

88 321200 泰州市 320000

89 321300 宿迁市 320000

90 330100 杭州市 330000

91 330200 宁波市 330000

92 330300 温州市 330000

93 330400 嘉兴市 330000

94 330500 湖州市 330000

95 330600 绍兴市 330000

96 330700 金华市 330000

97 330800 衢州市 330000

98 330900 舟山市 330000

99 331000 台州市 330000

100 331100 丽水市 330000

101 340100 合肥市 340000

102 340200 芜湖市 340000

103 340300 蚌埠市 340000

104 340400 淮南市 340000

105 340500 马鞍山市 340000

106 340600 淮北市 340000

107 340700 铜陵市 340000

108 340800 安庆市 340000

109 341000 黄山市 340000

110 341100 滁州市 340000

111 341200 阜阳市 340000

112 341300 宿州市 340000

113 341400 巢湖市 340000

114 341500 六安市 340000

115 341600 亳州市 340000

116 341700 池州市 340000

117 341800 宣城市 340000

118 350100 福州市 350000

119 350200 厦门市 350000

120 350300 莆田市 350000

121 350400 三明市 350000

122 350500 泉州市 350000

123 350600 漳州市 350000

124 350700 南平市 350000

125 350800 龙岩市 350000

126 350900 宁德市 350000

127 360100 南昌市 360000

128 360200 景德镇市 360000

129 360300 萍乡市 360000

130 360400 九江市 360000

131 360500 新余市 360000

132 360600 鹰潭市 360000

133 360700 赣州市 360000

134 360800 吉安市 360000

135 360900 宜春市 360000

136 361000 抚州市 360000

137 361100 上饶市 360000

138 370100 济南市 370000

139 370200 青岛市 370000

140 370300 淄博市 370000

141 370400 枣庄市 370000

142 370500 东营市 370000

143 370600 烟台市 370000

144 370700 潍坊市 370000

145 370800 济宁市 370000

146 370900 泰安市 370000

147 371000 威海市 370000

148 371100 日照市 370000

149 371200 莱芜市 370000

150 371300 临沂市 370000

151 371400 德州市 370000

152 371500 聊城市 370000

153 371600 滨州市 370000

154 371700 荷泽市 370000

155 410100 郑州市 410000

156 410200 开封市 410000

157 410300 洛阳市 410000

158 410400 平顶山市 410000

159 410500 安阳市 410000

160 410600 鹤壁市 410000

161 410700 新乡市 410000

162 410800 焦作市 410000

163 410900 濮阳市 410000

164 411000 许昌市 410000

165 411100 漯河市 410000

166 411200 三门峡市 410000

167 411300 南阳市 410000

168 411400 商丘市 410000

169 411500 信阳市 410000

170 411600 周口市 410000

171 411700 驻马店市 410000

172 420100 武汉市 420000

173 420200 黄石市 420000

174 420300 十堰市 420000

175 420500 宜昌市 420000

176 420600 襄樊市 420000

177 420700 鄂州市 420000

178 420800 荆门市 420000

179 420900 孝感市 420000

180 421000 荆州市 420000

181 421100 黄冈市 420000

182 421200 咸宁市 420000

183 421300 随州市 420000

184 422800 恩施土家族苗族自治州 420000

185 429000 省直辖行政单位 420000

186 430100 长沙市 430000

187 430200 株洲市 430000

188 430300 湘潭市 430000

189 430400 衡阳市 430000

190 430500 邵阳市 430000

191 430600 岳阳市 430000

192 430700 常德市 430000

193 430800 张家界市 430000

194 430900 益阳市 430000

195 431000 郴州市 430000

196 431100 永州市 430000

197 431200 怀化市 430000

198 431300 娄底市 430000

199 433100 湘西土家族苗族自治州 430000

200 440100 广州市 440000

201 440200 韶关市 440000

202 440300 深圳市 440000

203 440400 珠海市 440000

204 440500 汕头市 440000

205 440600 佛山市 440000

206 440700 江门市 440000

207 440800 湛江市 440000

208 440900 茂名市 440000

209 441200 肇庆市 440000

210 441300 惠州市 440000

211 441400 梅州市 440000

212 441500 汕尾市 440000

213 441600 河源市 440000

214 441700 阳江市 440000

215 441800 清远市 440000

216 441900 东莞市 440000

217 442000 中山市 440000

218 445100 潮州市 440000

219 445200 揭阳市 440000

220 445300 云浮市 440000

221 450100 南宁市 450000

222 450200 柳州市 450000

223 450300 桂林市 450000

224 450400 梧州市 450000

225 450500 北海市 450000

226 450600 防城港市 450000

227 450700 钦州市 450000

228 450800 贵港市 450000

229 450900 玉林市 450000

230 451000 百色市 450000

231 451100 贺州市 450000

232 451200 河池市 450000

233 451300 来宾市 450000

234 451400 崇左市 450000

235 460100 海口市 460000

236 460200 三亚市 460000

237 469000 省直辖县级行政单位 460000

238 500100 市辖区 500000

239 500200 县 500000

240 500300 市 500000

241 510100 成都市 510000

242 510300 自贡市 510000

243 510400 攀枝花市 510000

244 510500 泸州市 510000

245 510600 德阳市 510000

246 510700 绵阳市 510000

247 510800 广元市 510000

248 510900 遂宁市 510000

249 511000 内江市 510000

250 511100 乐山市 510000

251 511300 南充市 510000

252 511400 眉山市 510000

253 511500 宜宾市 510000

254 511600 广安市 510000

255 511700 达州市 510000

256 511800 雅安市 510000

257 511900 巴中市 510000

258 512000 资阳市 510000

259 513200 阿坝藏族羌族自治州 510000

260 513300 甘孜藏族自治州 510000

261 513400 凉山彝族自治州 510000

262 520100 贵阳市 520000

263 520200 六盘水市 520000

264 520300 遵义市 520000

265 520400 安顺市 520000

266 522200 铜仁地区 520000

267 522300 黔西南布依族苗族自治州 520000

268 522400 毕节地区 520000

269 522600 黔东南苗族侗族自治州 520000

270 522700 黔南布依族苗族自治州 520000

271 530100 昆明市 530000

272 530300 曲靖市 530000

273 530400 玉溪市 530000

274 530500 保山市 530000

275 530600 昭通市 530000

276 530700 丽江市 530000

277 530800 思茅市 530000

278 530900 临沧市 530000

279 532300 楚雄彝族自治州 530000

280 532500 红河哈尼族彝族自治州 530000

281 532600 文山壮族苗族自治州 530000

282 532800 西双版纳傣族自治州 530000

283 532900 大理白族自治州 530000

284 533100 德宏傣族景颇族自治州 530000

285 533300 怒江傈僳族自治州 530000

286 533400 迪庆藏族自治州 530000

287 540100 拉萨市 540000

288 542100 昌都地区 540000

289 542200 山南地区 540000

290 542300 日喀则地区 540000

291 542400 那曲地区 540000

292 542500 阿里地区 540000

293 542600 林芝地区 540000

294 610100 西安市 610000

295 610200 铜川市 610000

296 610300 宝鸡市 610000

297 610400 咸阳市 610000

298 610500 渭南市 610000

299 610600 延安市 610000

300 610700 汉中市 610000

301 610800 榆林市 610000

302 610900 安康市 610000

303 611000 商洛市 610000

304 620100 兰州市 620000

305 620200 嘉峪关市 620000

306 620300 金昌市 620000

307 620400 白银市 620000

308 620500 天水市 620000

309 620600 武威市 620000

310 620700 张掖市 620000

311 620800 平凉市 620000

312 620900 酒泉市 620000

313 621000 庆阳市 620000

314 621100 定西市 620000

315 621200 陇南市 620000

316 622900 临夏回族自治州 620000

317 623000 甘南藏族自治州 620000

318 630100 西宁市 630000

319 632100 海东地区 630000

320 632200 海北藏族自治州 630000

321 632300 黄南藏族自治州 630000

322 632500 海南藏族自治州 630000

323 632600 果洛藏族自治州 630000

324 632700 玉树藏族自治州 630000

325 632800 海西蒙古族藏族自治州 630000

326 640100 银川市 640000

327 640200 石嘴山市 640000

328 640300 吴忠市 640000

329 640400 固原市 640000

330 640500 中卫市 640000

331 650100 乌鲁木齐市 650000

332 650200 克拉玛依市 650000

333 652100 吐鲁番地区 650000

334 652200 哈密地区 650000

335 652300 昌吉回族自治州 650000

336 652700 博尔塔拉蒙古自治州 650000

337 652800 巴音郭楞蒙古自治州 650000

338 652900 阿克苏地区 650000

339 653000 克孜勒苏柯尔克孜自治州 650000

340 653100 喀什地区 650000

341 653200 和田地区 650000

342 654000 伊犁哈萨克自治州 650000

343 654200 塔城地区 650000

344 654300 阿勒泰地区 650000

345 659000 省直辖行政单位 650000

到这步就完成了,基本上没什么难度