两个下拉列表动态响应，碰到个难题怎么解决？

现在存在一个上下级的关系，只有两个级别。
比如：省份、城市。
我要做两个下拉列表，省份下拉列表里的值改变以后，城市下拉列表里的内容要动态变化成该省的城市。
但是现在有个难题就是，当我选择了一个省份以后，怎么知道它有哪些市。
我本来想通过ajax去数据库动态查询的，但是为了减轻数据库和服务器的压力，以及考虑到响应速度，所以放弃了。
那我想现在就只有一种办法了，将这种对应关系存在页面上。
请教大家如何看待这个问题！谢谢！

解决方案 »

  1.   

    用ajax+缓存，不会有多少压力的
      

  2.   

    不想存数据库，可以存在js中或xml中，不过还是存xml中实在点
      

  3.   

    http://blog.sina.com.cn/s/blog_3f0612650100bxfa.html用这个吧 JS 都是JS 联动的
      

  4.   

    存到xml是存一个xml文件还是存成一个xml字符串 直接赋给js的某个变量因为这些数据都是动态的 存成xml文件的话 那每次都要生成xml文件 感觉太浪费
      

  5.   

    去网上搜jQuery省市级联插件，很多的
      

  6.   

    其实仅仅的一个上下级能给数据库带来多大的压力，所以ajax还是可取的，响应速度也不会慢的。楼主说的第2种方法，我想可以一开始把所有的数据查询出来，放到js数组里面，第2级数组 arrry[]={};[]里面加上父级的id，然后通过js来更换数组绑定。
      

  7.   


    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="WebIhttpModule.login" %>
    <!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">
            var arryprv = new Array(<%= cityarray%>);
            function ChangeProv(obj) {
                var objcity = document.getElementById('SlctCity');
                var s = obj.options[obj.selectedIndex].value;
                objcity.options.length = 0;
                if (s == '0') {
                    objcity.style.display = 'none';
                    document.getElementById('err_addr').style.display = '';
                    return;
                }
                else {
                    document.getElementById('err_addr').style.display = 'none';
                }
                objcity.style.display = '';
                var optn = document.createElement('option');
                optn.value = '0';
                optn.innerHTML = '所在城市';
                objcity.appendChild(optn);
                for (var i = 0; i < arryprv.length; i++) {
                    var arr = arryprv[i];
                    if (arr[0] == s) {
                        var opt = document.createElement('option');
                        opt.value = arr[1];
                        opt.innerHTML = arr[2];
                        objcity.appendChild(opt);
                    }
                }
            }
        </script></head>
    <body>
        <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>
                        <select name="SlctProvince" id="SlctProvince" onchange="ChangeProv(this);">
                            <option value="0" selected="selected">所在省份</option>
                            <%# province%>
                        </select>
                    </td>
                    <td>
                        <select name="SlctCity" id="SlctCity" style="display: none;">
                        </select>
                        <p class="content" id="err_addr" style="display: none;">
                            <label class="f-label">
                                &nbsp;</label>
                            <span class="reshow">请选择目前你所居住地。</span>
                        </p>
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html> public partial class login : System.Web.UI.Page
        {
            protected string province = string.Empty;
            protected string cityarray = string.Empty;
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    List<Dict_AreaInfo> areas = new List<Dict_AreaInfo>() { 
                    new Dict_AreaInfo(1,0,"湖北省",false),
                    new Dict_AreaInfo(2,0,"湖南省",false),
                    new Dict_AreaInfo(3,1,"武汉市",false),
                    new Dict_AreaInfo(4,1,"宜昌市",false),
                    new Dict_AreaInfo(5,2,"长沙市",false),
                    new Dict_AreaInfo(6,2,"株洲市",false)
                    };
                    foreach (Dict_AreaInfo info in areas)
                    {
                        if (info.ParentID.Equals(0))
                        {
                            province += "<option value=\"" + info.ID + "\">" + info.Name + "</option>";
                        }
                        else
                        {
                            if (!cityarray.Equals(string.Empty))
                                cityarray += ",";
                            cityarray += "new Array('" + info.ParentID + "','" + info.ID + "','" + info.Name + "')";
                        }
                    }
                }
                Page.DataBind();
            }
        }
        public class Dict_AreaInfo
        {
            public Dict_AreaInfo(int id, int pid, string name, bool islock)
            {
                this.ID = id;
                this.ParentID = pid;
                this.Name = name;
                this.IsLock = islock;
            }        /// <summary>
            /// 自增长编号
            /// </summary>
            private int _ID;
            public int ID
            {
                set { _ID = value; }
                get { return _ID; }
            }
            /// <summary>
            /// 父级编号(如无上一级则为:0)
            /// </summary>
            private int _ParentID;
            public int ParentID
            {
                set { _ParentID = value; }
                get { return _ParentID; }
            }
            /// <summary>
            /// 名称
            /// </summary>
            private string _Name;
            public string Name
            {
                set { _Name = value; }
                get { return _Name; }
            }
            /// <summary>
            /// 是否锁定
            /// </summary>
            private bool _IsLock;
            public bool IsLock
            {
                set { _IsLock = value; }
                get { return _IsLock; }
            }
        }
      

  8.   

    ajax控件：CascadingDropDown<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="provinceDr"
            ServicePath="GetDLDetailInfo.asmx" ServiceMethod="GetProvince" Category="province"
            PromptValue="0" ParentControlID="" LoadingText="加载省份.." PromptText="请选择省份">
        </ajaxToolkit:CascadingDropDown>
        <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="cityDr"
            ServicePath="GetDLDetailInfo.asmx" ServiceMethod="GetCityByProvince" Category="city"
            ParentControlID="provinceDr" LoadingText="加载城市.." PromptText="请选择城市">
        </ajaxToolkit:CascadingDropDown>
        <ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="areaDr"
            ServicePath="GetDLDetailInfo.asmx" ServiceMethod="GetAreaByCity" Category="area"
            ParentControlID="cityDr" LoadingText="加载地区.." PromptText="请选择地区">
        </ajaxToolkit:CascadingDropDown>
    地区选择：<asp:DropDownList ID="provinceDr" runat="server" Width="128px">
                </asp:DropDownList>
                <asp:DropDownList ID="cityDr" runat="server" Width="160px">
                </asp:DropDownList>
                <asp:DropDownList ID="areaDr" runat="server" Width="151px">
                </asp:DropDownList>webServie方法：
    [WebMethod]
        public CascadingDropDownNameValue[] GetProvince(string knownCategoryValues, string category)
        {
            _myTable = _myProvinceOper.SelectAllProvince();
            _values = new List<CascadingDropDownNameValue>();        foreach (DataRow _r in _myTable.Rows)
            {
                _values.Add(new CascadingDropDownNameValue(_r["province"].ToString(), _r["provinceID"].ToString()));
            }
            return _values.ToArray();
        }    [WebMethod]
        public CascadingDropDownNameValue[] GetCityByProvince(string knownCategoryValues, string category)
        {
            StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);        int _provinceID;
            if (!kv.ContainsKey("province") || !Int32.TryParse(kv["province"], out _provinceID))
            {
                return null;
            }        _myTable = _myProvinceOper.SelectAllCity(_provinceID);
            _values = new List<CascadingDropDownNameValue>();        foreach (DataRow _r in _myTable.Rows)
            {
                _values.Add(new CascadingDropDownNameValue(_r["city"].ToString(), _r["cityID"].ToString()));
            }
            return _values.ToArray();
        }    [WebMethod]
        public CascadingDropDownNameValue[] GetAreaByCity(string knownCategoryValues, string category)
        {
            StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
            int _cityID;
            if (!kv.ContainsKey("city") || !Int32.TryParse(kv["city"], out _cityID))
            {
                return null;
            }
            _myTable = _myProvinceOper.SelectAllArea(_cityID);
            _values = new List<CascadingDropDownNameValue>();        foreach (DataRow _r in _myTable.Rows)
            {
                _values.Add(new CascadingDropDownNameValue(_r["area"].ToString(), _r["areaID"].ToString()));
            }
            return _values.ToArray();
        }有需要联系我。给你发源码
      

  9.   


    一般是js联动 如果你要用数据库的话  记value  根据value值去取
      

  10.   

    级数少、数据少，个人觉得就不能显示ajax的优势（换句话说，就是不适合用ajax）不知道这样可不可以：
    将省、市以变量的形式定义到js文件中，每次只是调用一下方法而矣
    而且js文件可以被缓存