您的位置：首页 > Web前端 > JQuery

jquery实现无刷新省市县三级绑定（包含只有提交的情况和修改信息绑定后再提交的情况）

2011-09-01 11:17 483 查看
此前做过类似的三级绑定，但在修改信息的时候，绑定然后再提交，下拉框的值总会消失，或者就是回传以后，下拉框的值也会消失，这两天又遇到同样的问题，所以下决心把这个彻底搞定。

本实例用的是jquery+ashx实现。

第一种情况，只有提交的情况。

aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Area.aspx.cs" Inherits="Area" %>

<!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>无标题页</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
doChange(null,"province","0");
});
function doChange(id,sub_id,id_value)
{
$("#"+sub_id).empty();
var p_id=id_value;
if(id!=null)
{
p_id=$("#" + id).val();
}
var options="<option value=\"\">请选择</option>";
if(p_id!="")
{
$.getJSON("GetArea.ashx",{pid:p_id},function(data){
$.each(data.items,function(i,item){
options += "<option value=\"" + item.value + "\">" + item.text + "</option>";
});
$("#" + sub_id).append(options);
});
}
else
{
$("#" + sub_id).append(options);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select name="province" id="province" onchange="doChange('province','city','0','')"></select>省
<select name="city" id="city" onchange="doChange('city','area','0','')"></select>市
<select name="area" id="area"></select>县
</div>
</form>
</body>
</html>


三个select分别用于显示省，市，县

以下是GetArea.ashx代码

<%@ WebHandler Language="C#" Class="GetArea" %>

using System;
using System.Web;
using System.Data;
using GeodonHelper;

public class GetArea : IHttpHandler {

public void ProcessRequest (HttpContext context) {
string startValue = "{\"items\":[";
string endValue = "]}";
if (context.Request.QueryString["pid"] == null || !ValidateHelper.IsInteger(context.Request.QueryString["pid"].ToString()))
{
context.Response.Write(startValue + "{value:\"\",text:\"参数错误\"}" + endValue);
context.Response.End();
}
else
{
int pid = int.Parse(context.Request.QueryString["pid"].ToString());

string middleValue = "";
//DBHelper是我自己写的数据库操作类库，目前支持MSSQL MySql，Access，SQlite，此处的代码可以换成你自己的数据库操作代码。

DBHelper sh = DBHelper.CreateInstance();

string sql = "select Id,AreaName from Area where ParentId=@pid";
sh.Params.Add("@pid", pid);
DataTable tb = sh.ExecuteDataTable(sql);
int count = tb.Rows.Count;
if (count == 0)
{
context.Response.Write(startValue + "{value:\"\",text:\"没有数据\"}" + endValue);
context.Response.End();
}
else
{
for (int i = 0; i < count; i++)
{
middleValue += ",{value:\"" + tb.Rows[i]["Id"].ToString().Trim() + "\",text:\"" + tb.Rows[i]["AreaName"].ToString().Trim() + "\"}";
}

middleValue = middleValue.Substring(1);
context.Response.Write(startValue + middleValue + endValue);
context.Response.End();
}
}
}

public bool IsReusable {
get {
return true;
}
}

}


提交数据的时候用Request["province"],Request["city"],Request["area"]

第二种情况：修改信息先从数据库获取省市县编号，然后绑定三个select，然后再提交数据.

aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Edit.aspx.cs" Inherits="Edit" %>

<!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>无标题页</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
GetProvince();
});
function GetProvince()
{
var province=$("#province");
province.empty();
var options="<option value=\"\">请选择</option>";
$.getJSON("GetArea.ashx",{pid:"0"},function(data){
$.each(data.items,function(i,item){
options += "<option value=\"" + item.value + "\">" + item.text + "</option>";
});
province.append(options);
province.val("<%=province %>");
GetCity();
});
}
function GetCity()
{
var city=$("#city");
city.empty();
var p_id=$("#province").val();
var options="<option value=\"\">请选择</option>";
if(p_id!="")
{
$.getJSON("GetArea.ashx",{pid:p_id},function(data){
$.each(data.items,function(i,item){
options += "<option value=\"" + item.value + "\">" + item.text + "</option>";
});
city.append(options);
city.val("<%=city %>");
GetArea();
});
}
else
{
city.append(options);
GetArea();
}

}
function GetArea()
{
var area=$("#area");
area.empty();
var p_id=$("#city").val();
var options="<option value=\"\">请选择</option>";
if(p_id!="" && p_id!=null)
{
$.getJSON("GetArea.ashx",{pid:p_id},function(data){
$.each(data.items,function(i,item){
options += "<option value=\"" + item.value + "\">" + item.text + "</option>";
});
area.append(options);
area.val("<%=area %>");
});
}
else
{
area.append(options);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select name="province" id="province" onchange="GetCity()"></select>省
<select name="city" id="city" onchange="GetArea()"></select>市
<select name="area" id="area"></select>县
</div>
<asp:Button ID="btn_submit" runat="server" Text="提交表单"
onclick="btn_submit_Click" />
<br />
<asp:Label ID="lbl_msg" runat="server"></asp:Label>
</form>
</body>
</html>


因为要为每个select赋值，而这个赋值又只能在ajax加载成功之后进行，所以我采取的办法是写三个方法，分别用于加载省，市，县

下面是aspx.cs代码

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using GeodonHelper;

public partial class Edit : System.Web.UI.Page
{
public string province = "", city = "", area = "";
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["id"] != null)
{
province = "97";
city = "279";
area = "1469";
}
}
protected void btn_submit_Click(object sender, EventArgs e)
{
lbl_msg.Text = Request["province"] + "&" + Request["city"] + "&" + Request["area"];
}
}


ajax加载数据用的还是GetArea.ashx。　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航