联动很简单,难的是无刷新给三个dropdownlist赋相关联的初值 比如第一个省初始值显示全国的省,在page_load中可以绑定一个,然后在JS中可以根据这绑定的值给市的dropdownlist赋值用ajax来实现,关键是怎么给市赋给数据库中显示的值,这个值什么时候赋,怎么赋?有没有高手解决下??因为下级的绑定是根据上级来的,所以比较困惑,试了几种方法,没有效果,高手帮帮忙!
调试欢乐多
<div ><asp:DropDownlist ID="ddlProvince" runat="server">
</asp:DropDownlist>
<script type="text/javascript" language="javascript">
var val = document.getElementById("ddlProvince").value;
BindCity(val);
</script>
<span style="COLOR: #000"> 所在城市:</span>
<asp:DropDownlist ID="ddlCity" runat="server" onchange="BindCounty(this.value);form1.HidCity.value=this.value;">
<asp:listItem Value="0">-请选择-</asp:listItem>
</asp:DropDownlist>
<span style="COLOR: #000"> 所在区县:</span>
<asp:DropDownlist ID="ddlCounty" runat="server" onchange="form1.HidCounty.value=this.value;">
<asp:listItem Value="0">-请选择-</asp:listItem>
</asp:DropDownlist> <asp:HiddenField ID="HidCounty" runat="server" />
<asp:HiddenField ID="HidCity" runat="server" />
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" <span style="font-family: simsun; font-size: 14px; line-height: 23px; "><span style="color:#FF0000;">EnableEventValidation="false"</span></span> AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="club_Default" Title="无标题页" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
$(document).ready(function() {
//预先加载第一个select,加载省,看好加载的的页面Handlerprovince.ashx
$.post('Handlerprovince.ashx', {}, function(data) { $("#ctl00_ContentPlaceHolder1_ddl_province").html(data) }, 'html');
//当选择省的时候加载二级市,构成联动
$("#ctl00_ContentPlaceHolder1_ddl_province").change(function() {
$.post('Handlercity.ashx', { cartype: $(this).val() }, function(data) { $("#ctl00_ContentPlaceHolder1_ddl_city").empty().html(data) }, 'html');
});
//当选择二级市的时候加载区县,构成联动
$("#ctl00_ContentPlaceHolder1_ddl_city").change(function() {
$.post('Handlerarea.ashx', { cartype: $(this).val() }, function(data) { $("#ctl00_ContentPlaceHolder1_ddl_area").empty().html(data) }, 'html');
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:DropDownList ID="ddl_province" runat="server">
</asp:DropDownList>
省
<asp:DropDownList ID="ddl_city" runat="server">
</asp:DropDownList>市
<asp:DropDownList ID="ddl_area" runat="server">
</asp:DropDownList>区/县<br />
<asp:Button ID="Button1" runat="server" Text="Button"
onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Content>
using System;
using System.Web;
using System.Data;
using System.Text;public class Handlerprovince : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Clear();
DataTable dt = new DataTable();
string sql = "select * from province order by name";
SQLHelper.FillDataTable(sql, dt);
StringBuilder st = new StringBuilder();
st.Append("<option value=\"\">--请选择--</option>");
foreach (DataRow item in dt.Rows)
{
st.Append("<option value=\"" + item["code"] + "\">" + item["name"] + "</option>"); }
context.Response.Write(st.ToString());
}
public bool IsReusable {
get {
return false;
}
}}
using System;
using System.Web;
using System.Data;
using System.Text;public class Handlercity : IHttpHandler
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Clear();
string provinceId = context.Request.Form[0].ToString();
DataTable dt = new DataTable();
string sql = "select * from city where provinceId='" + provinceId + "' order by name";
SQLHelper.FillDataTable(sql, dt);
StringBuilder st = new StringBuilder();
st.Append("<option value=\"\">--请选择--</option>");
foreach (DataRow item in dt.Rows)
{
st.Append("<option value=\"" + item["code"] + "\">" + item["name"] + "</option>"); }
context.Response.Write(st.ToString());
}
public bool IsReusable {
get {
return false;
}
}}
using System;
using System.Web;
using System.Data;
using System.Text;public class Handlerarea : IHttpHandler
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Clear();
string cityid = context.Request.Form[0].ToString();
DataTable dt = new DataTable();
string sql = "select * from [area] where [cityId]='" + cityid + "' order by name";
SQLHelper.FillDataTable(sql, dt);
StringBuilder st = new StringBuilder();
st.Append("<option value=\"\">--请选择--</option>");
foreach (DataRow item in dt.Rows)
{
st.Append("<option value=\"" + item["code"] + "\">" + item["name"] + "</option>"); }
context.Response.Write(st.ToString());
}
public bool IsReusable {
get {
return false;
}
}}
</asp:DropDownlist>
<span style="COLOR: #000"> 所在城市:</span>
<asp:DropDownlist ID="ddlCity" runat="server" onchange="BindCounty(this.value);form1.HidCity.value=this.value;">
<asp:listItem Value="0">-请选择-</asp:listItem>
</asp:DropDownlist>
<span style="COLOR: #000"> 所在区县:</span>
<asp:DropDownlist ID="ddlCounty" runat="server" onchange="form1.HidCounty.value=this.value;">
<asp:listItem Value="0">-请选择-</asp:listItem>
</asp:DropDownlist> <asp:HiddenField ID="HidCounty" runat="server" />
<asp:HiddenField ID="HidCity" runat="server" />
</div>
$.post('Handlerfirstcityarea.ashx', { cartype: $(this).val() }, function(data) { $("#ctl00_ContentPlaceHolder1_ddl_area").empty().html(data) }, 'html');
});
public class Handlerfirstcityarea : IHttpHandler
{
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Clear();
string provinceId = context.Request.Form[0].ToString();
DataTable dt = new DataTable();
string sql = "select * from [area] where [cityId]=(select top 1 code from city where provinceId='" + provinceId + "' order by name) order by name";
SQLHelper.FillDataTable(sql, dt);
StringBuilder st = new StringBuilder();
foreach (DataRow item in dt.Rows)
{
st.Append("<option value=\"" + item["code"] + "\">" + item["name"] + "</option>"); }
context.Response.Write(st.ToString());
}
public bool IsReusable {
get {
return false;
}
}}
http://www.cnblogs.com/insus/archive/2011/07/04/2097059.html
drop2的选中事件 根据drop1的值去查询drop2的值
drop2的选中事件 根据drop1和2的值查询drop3的值
//预先加载第一个select,加载省,看好加载的的页面Handlerprovince.ashx
$.post('Handlerprovince.ashx', {}, function(data) { $("#ctl00_ContentPlaceHolder1_ddl_province").html(data) }, 'html');
如同这个一样三个都预先加载using System;
using System.Web;
using System.Data;
using System.Text;public class Handlerprovince : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Clear();
DataTable dt = new DataTable();
string sql = "select * from province order by name";
SQLHelper.FillDataTable(sql, dt);
StringBuilder st = new StringBuilder();
//此处注释掉
//st.Append("<option value=\"\">--请选择--</option>");
foreach (DataRow item in dt.Rows)
{
//根据你要设置的初始值判断
if(item["name"]="某某省"){
st.Append("<option value=\"" + item["code"] + "\" select>" + item["name"] + "</option>");}else{
st.Append("<option value=\"" + item["code"] + "\">" + item["name"] + "</option>");
} }
context.Response.Write(st.ToString());
}
public bool IsReusable {
get {
return false;
}
}}剩下的就不用在说了吧
//比如选择了省份,那用Ajax读取数据,填充城市下拉框,
//接下来就是再次读取该市下面的乡镇填充第三个下拉框嘛,难道你不会现次读取????
//上面我看到有朋友说到下拉控制的onchange事件,这是好事啊,这个是人工手动触发的
//如果让IE模拟人工,也简单嘛,你把各个下拉框的onchange事件要执行的函数分开来写好
//然后,在页面加载完后统一执行一次就可以了windows.onload=function{
aa();//在这个方法里,你异步读取到数据后,并填充好相应的下拉框后,接下来调用第三个JS函数就可以了,因为你填充完了,下拉框就会默认第一项为选中项,
//相信你应该找得到填充下拉框的代码块的,就在这一块后面调用之前使用onchange事件触、发才执行的那个函数就行了
}