dropdownlist三级联动赋初值的问题

联动很简单，难的是无刷新给三个dropdownlist赋相关联的初值 比如第一个省初始值显示全国的省，在page_load中可以绑定一个，然后在JS中可以根据这绑定的值给市的dropdownlist赋值用ajax来实现，关键是怎么给市赋给数据库中显示的值，这个值什么时候赋，怎么赋？有没有高手解决下？？因为下级的绑定是根据上级来的，所以比较困惑，试了几种方法，没有效果，高手帮帮忙！

23 个解决方案

#1

可以给第一个省级的赋值，并选定初值，然后给市级的赋值，这时候怎么选定呢？

#2

用前台js我就不会，用后台还可以，路过，学习学习！

#3

没有明白什么意思，在控件的selected_change里写代码动态提取数据不行？

#4

引用 3 楼 langxingcs 的回复:

没有明白什么意思，在控件的selected_change里写代码动态提取数据不行？

可以实现给第二个赋值也就是市级的赋值，但是没有办法选定

#5

<label class="wmax"><span>*</span>所在省份：</label> 
  <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">&nbsp;&nbsp;所在城市：</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">&nbsp;&nbsp;所在区县：</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" />

#6

jquery 1.6.2

<%@ 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;
        }
    }

}

#7

上边这个是改过的，原来的

<div ><asp:DropDownlist ID="ddlProvince" runat="server" onchange="BindCity(this.value);">
                                </asp:DropDownlist>
  <span style="COLOR: #000">&nbsp;&nbsp;所在城市：</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">&nbsp;&nbsp;所在区县：</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>

#8

先去把原先的帖子结了吧 看你的结帖率就没人想回答了

#9

初始化的时候省级是有值列表的,市级以及县级是没有值列表的，市级和县级可以用“--请选择--”做初值，然后在省级的dropdownlist的控件上用脚本的onchange事件,不要用服务器事件,onchange事件中用ajax取得数据库的市级列表，加载到市级控件中。注意的是ajax须传递省级的id回去。

#10

引用 6 楼 anchenyanyue 的回复:

jquery 1.6.2

HTML code

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" <span style="font-family: simsun; font-size: 14px; line-height: 23px; "><span style="color:#FF0000;">EnableEven……

怎么在初始的情况下就选择一个省市县 比如初始的选择就是 河北省 廊坊市 XX县 （从数据库中取得）

#11

引用 9 楼 huangbomeizi 的回复:

初始化的时候省级是有值列表的,市级以及县级是没有值列表的，市级和县级可以用“--请选择--”做初值，然后在省级的dropdownlist的控件上用脚本的onchange事件,不要用服务器事件,onchange事件中用ajax取得数据库的市级列表，加载到市级控件中。注意的是ajax须传递省级的id回去。

怎么选定市级并初始化县级然后在选定县级

#12

你是想选择了某个省，就直接弹出市和区/县么

#13

引用 8 楼 anchenyanyue 的回复:

先去把原先的帖子结了吧 看你的结帖率就没人想回答了

第一次来问问题，什么结贴率！？？？

#14

引用 12 楼 anchenyanyue 的回复:

你是想选择了某个省，就直接弹出市和区/县么

初始化的时候就是直接选定好的，怎么实现？ 谢谢

#15

以下的方法是选择了省得同时联动市和区县

$("#ctl00_ContentPlaceHolder1_ddl_province").change(function() {
        $.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;
        }
    }

}

#16

哪有牛人啊

#17

参考：
http://www.cnblogs.com/insus/archive/2011/07/04/2097059.html

#18

drop1 赋初始
drop2的选中事件 根据drop1的值去查询drop2的值
drop2的选中事件 根据drop1和2的值查询drop3的值

#19

anchenyanyue 是牛人！

#20

不理解你的三级联动是什么意思，地区选择应该是一级一级来的，互相关联，

#21

//预先加载第一个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;
        }
    }

}

剩下的就不用在说了吧

#22

引用 20 楼 xrx20102 的回复:

不理解你的三级联动是什么意思，地区选择应该是一级一级来的，互相关联，

是一级一级来的，但是有地区是初始选定好的，还可以选定为其他的地区！

#23

你能够在页面加载完了对省份赋值，那你为什么不再在给省份赋值后，接着给城市赋值呢？你填充省份下拉框，至少有一个默认选项吧，比如第一项，那这时候再让程序填充城市绝对是没理由不可以的吧？？

//如果你是用Ajax的话，那更简单了
//比如选择了省份，那用Ajax读取数据，填充城市下拉框，
//接下来就是再次读取该市下面的乡镇填充第三个下拉框嘛，难道你不会现次读取？？？？


//上面我看到有朋友说到下拉控制的onchange事件，这是好事啊，这个是人工手动触发的
//如果让IE模拟人工，也简单嘛，你把各个下拉框的onchange事件要执行的函数分开来写好
//然后，在页面加载完后统一执行一次就可以了windows.onload=function{
aa();//在这个方法里，你异步读取到数据后，并填充好相应的下拉框后，接下来调用第三个JS函数就可以了，因为你填充完了，下拉框就会默认第一项为选中项，
//相信你应该找得到填充下拉框的代码块的，就在这一块后面调用之前使用onchange事件触、发才执行的那个函数就行了
}