asp.net+jquery+ashx打造三级无刷新可与服务器端交互的地区选择控件
下载源代码下载源代码
地区控件的前台页面
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AreaSelect.ascx.cs" Inherits="control_AreaSelect" %>
<script type="text/javascript">
var area="#<%=area.ClientID %>";
var city="#<%=city.ClientID %>";
var provinceValue="#<%=hProvince.ClientID %>";
var areaValue="#<%=hArea.ClientID %>";
function ChangeProvince(va)
{
//判断有没有选择省
if(va!='0')
{
$(provinceValue).val(va);
$(city).attr("disabled",false);
$(area).attr("disabled",true);
$(area).clearAll();
//ajax获取数据
$.get(
"AreaHandler.ashx",
{ type: "sheng", time:new Date(),id:va },
function(data)
{
MakeOptions(city,data);
}
);
}
}
//生成select列表
function MakeOptions(id,data)
{
//初始化
$(id).clearAll();
$(id).setSelectedIndex(0);
if(data.indexOf(",")!=-1)
{
var classList=data.split("|");
for(var i=0;i<classList.length;i++)
{
var tmp=classList[i].split(",");
$("<option value="+tmp[0]+">"+tmp[1]+"</option>").appendTo(id);
}
}
}
//设置选中指定索引项
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("选中项索引超出范围");
}
else
{
jQuery(this).get(0).selectedIndex = index;
}
}
//清除select中的所有项
jQuery.fn.clearAll = function()
{
jQuery(this).get(0).options.length = 1;
}
//选择城市
function ChangeCity(va)
{
if(va!='0')
{
$(area).attr("disabled",false);
//ajax获取数据
$.get(
"Handler.ashx",
{ type: "shi", time:new Date(),id:va },
function(data)
{
MakeOptions(area,data);
}
);
}
}
//选择地区
function ChangeArea(va)
{
if(va!='0')
{
$(areaValue).val(va);
}
}
</script>
<div>
<!--保存省和地区变量的值-->
<asp:HiddenField ID="hProvince" Value="0" runat="server" />
<asp:HiddenField ID="hArea" Value="0" runat="server" />
<!--省份列表 这里的数据刷新页面时直接去数据库得到。。-->
<select id="province" runat="server" onchange="ChangeProvince(this.value)">
<option value="0" disabled="disabled">--请选择省--</option>
</select>
<!--城市列表 等到ajax查询出该省份的所有城市，用填充到城市列表中-->
<select id="city" runat="server" onchange="ChangeCity(this.value)">
<option value="0">--请选择市--</option>
</select>
<!--地区的列表 -->
<select id="area" runat="server" onchange="ChangeArea(this.value)" >
<option value="0">--请选择区--</option>
</select>
</div>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class control_AreaSelect : System.Web.UI.UserControl
{
//获取省份选择的值 ===这个是为了提供接口
public int ProvinceValue
{
get{return int.Parse(this.hProvince.Value);}
}
//获取地址选择的值 ===这个是为了提供接口
public int AreaValue
{
get { return int.Parse(this.hArea.Value); }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
com.hbwl.BLL.base_Provincial province = new com.hbwl.BLL.base_Provincial();
DataSet ds = province.GetList();
string code, name;
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
code = ds.Tables[0].Rows[i]["ProvincialID"].ToString();
name = ds.Tables[0].Rows[i]["ProvincialName"].ToString();
this.province.Items.Add(new ListItem(name, code));
}
this.city.Disabled = true;
this.area.Disabled = true;
hProvince.Value = this.sheng.Value;
hArea.Value = this.area.Value;
}
}
}