使用 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
{
width: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(""); //执行 a=1 //写一个加载方法 function selectlode(a) { if (a == "")
{
$.ajax({
url: "ccc.ashx",
data: {"areacode":""},
type: "post",
dataType: "json",
success: function (msg) { //接收 ajax 传出了的数据 for (var i= ; i < msg.length; i++)
{
//将结果编写成 html 标记语言 var v = "<option value=\"" + msg[i].code + "\">" + msg[i].name + "</option>"; $("#sel1").append(v);
} selectlode(""); // 当1 加载完后再加载2 },
error: function () { },
beforeSend: function () { $("#sel1").html(""); // 加载结果时，先将元数据清空 },
complete: function () { } });
} if (a == "")
{
$.ajax({
url: "ccc.ashx",
data: { "areacode": $("#sel1").val() },
type: "post",
dataType: "json",
success: function (msg) { for (var i = ; i < msg.length; i++) {
var v = "<option value=\"" + msg[i].code + "\">" + msg[i].name + "</option>"; $("#sel2").append(v);
} selectlode(""); //加载完2后加载3 },
error: function () { },
beforeSend: function () { $("#sel2").html('');
},
complete: function () { } }); } if (a == "")
{
$.ajax({
url: "ccc.ashx",
data: { "areacode": $("#sel2").val() },
type: "post",
dataType: "json",
success: function (msg) { for (var i = ; 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("");
}); $("#sel2").change(function () { //当2选项改变时3执行
selectlode(""); }); </script>
.aspx
<%@ 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 = ;
foreach (ChinaStates c in clist)
{
if (count > )
{
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;
}
} }
.ashx