使用 AJAX 对全国地名进行选取
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="Jquery/jquery-1.7.1.min.js"></script> <style type ="text/css"> .sele { 80px; } </style> </head> <body> <form id="form1" runat="server"> <%--三个下拉列表--%> <select id="sel1" class="sele"></select> <select id="sel2" class ="sele"></select> <select id="sel3" class ="sele"></select> </form> </body> </html> <script type ="text/javascript" > selectlode("1"); //执行 a=1 //写一个加载方法 function selectlode(a) { if (a == "1") { $.ajax({ url: "ccc.ashx", data: {"areacode":"0001"}, type: "post", dataType: "json", success: function (msg) { //接收 ajax 传出了的数据 for (var i=0 ; i < msg.length; i++) { //将结果编写成 html 标记语言 var v = "<option value="" + msg[i].code + "">" + msg[i].name + "</option>"; $("#sel1").append(v); } selectlode("2"); // 当1 加载完后再加载2 }, error: function () { }, beforeSend: function () { $("#sel1").html(""); // 加载结果时，先将元数据清空 }, complete: function () { } }); } if (a == "2") { $.ajax({ url: "ccc.ashx", data: { "areacode": $("#sel1").val() }, type: "post", dataType: "json", success: function (msg) { for (var i = 0 ; i < msg.length; i++) { var v = "<option value="" + msg[i].code + "">" + msg[i].name + "</option>"; $("#sel2").append(v); } selectlode("3"); //加载完2后加载3 }, error: function () { }, beforeSend: function () { $("#sel2").html(''); }, complete: function () { } }); } if (a == "3") { $.ajax({ url: "ccc.ashx", data: { "areacode": $("#sel2").val() }, type: "post", dataType: "json", success: function (msg) { for (var i = 0 ; i < msg.length; i++) { var v = "<option value="" + msg[i].code + "">" + msg[i].name + "</option>"; $("#sel3").append(v); } }, error: function () { }, beforeSend: function () { $("#sel3").html(''); }, complete: function () { } }); } } //选项改变时查询方法 $("#sel1").change(function(){ //当1选项改变时2执行 selectlode("2"); }); $("#sel2").change(function () { //当2选项改变时3执行 selectlode("3"); }); </script>
<%@ WebHandler Language="C#" Class="ccc" %> using System; using System.Web; using System.Linq; //********** using System.Collections.Generic; //********** 三个引入的命名空间 using System.Text; //********** public class ccc : IHttpHandler { public void ProcessRequest(HttpContext context) { StringBuilder str = new StringBuilder(); str.Append("["); // 字符串拼接 string s = context.Request["areacode"]; using (DataClassesDataContext con = new DataClassesDataContext()) { List<ChinaStates> clist = new List<ChinaStates>(); clist = con.ChinaStates.Where(r => r.ParentAreaCode ==s).ToList(); int count = 0; foreach (ChinaStates c in clist) { if (count > 0) { str.Append(","); } str.Append("{"code":""+c.AreaCode +"","name":""+c.AreaName+""}"); count++; //将查询结果拼接成 json 对象！！！！！！！ } } str.Append("]"); context.Response.Write(str); context.Response.End(); } public bool IsReusable { get { return false; } } }