做了一个省市级联的用户控件,当一个页面引用一次该控件的情况下没问题,但是当一个页面引用两次或更多该控件时,就会出现:当A控件选择省份后,A控件选择不了城市,而B控件却可以选择城市 的问题了。如下图下面粘出代码,望大神给出指导。
ASP.NET省市级联

解决方案 »

  1. 这是用户控件前台代码:
    <script src="/js/jquery_select.js" type="text/javascript"></script>
    <script type="text/javascript">
    function GetCityJson(obj,f)
    {
        var v=obj.value;
        if(f==1||f==2)
        {
            $.ajax({
                   type: "POST",
                   dataType: "json",
                   url: "/my_ascx/City_Json.ashx?val="+v+"&Rnd="+Math.random(),
                   data: "",
                   success: function(data){
                       if(f==1)
                       {
                            $("#<%=City.ClientID  %>").clearAll();
                            $("#<%=City.ClientID  %>").addOption("请选择", "");
                            for(var i=0;i<data.data.length;i++)
                            {                           
                                $("#<%=City.ClientID  %>").addOption(data.data[i].text, data.data[i].id);
                            }
                             $("#<%=Hid_value.ClientID  %>").val($("#<%=Province.ClientID  %>").val());
                            $("#<%=Hid_text.ClientID  %>").val($("#<%=Province.ClientID  %>").getSelectedText());
                       }
                       else if(f==2)
                       {     
                            $("#<%=County.ClientID  %>").clearAll();
                            $("#<%=County.ClientID  %>").addOption("请选择", "");                       
                            for(var i=0;i<data.data.length;i++)
                            {                           
                                $("#<%=County.ClientID  %>").addOption(data.data[i].text, data.data[i].id);
                            }
                            $("#<%=Hid_value.ClientID  %>").val($("#<%=City.ClientID  %>").val());
                            $("#<%=Hid_text.ClientID  %>").val($("#<%=Province.ClientID  %>").getSelectedText()+$("#<%=City.ClientID  %>").getSelectedText());
                       }                           
                   }
            });
            
        }
        else
        {
            $("#<%=Hid_value.ClientID  %>").val($("#<%=County.ClientID  %>").val());
            $("#<%=Hid_text.ClientID  %>").val($("#<%=Province.ClientID  %>").getSelectedText()+$("#<%=City.ClientID  %>").getSelectedText()+$("#<%=County.ClientID  %>").getSelectedText());
        }
                    
                    
    }
    </script>
    <asp:DropDownList ID="Province" runat="server" onchange="GetCityJson(this,1)">
    </asp:DropDownList>
    <asp:DropDownList ID="City" runat="server" onchange="GetCityJson(this,2)">
    </asp:DropDownList>
    <asp:DropDownList ID="County" runat="server" onchange="GetCityJson(this,3)">
    </asp:DropDownList>
    <asp:HiddenField ID="Hid_value" runat="server" />
    <asp:HiddenField ID="Hid_text" runat="server" />
    <asp:Label ID="Lab_Text" runat="server" Text=""></asp:Label>
      

  2. 找相应的控件 ,自己写没那个必要啊,http://download.csdn.net/detail/jiarenwoainimen/5647963
      

  3. 不应该有这个情况发生。在页面引用这个用户控件多次,ID是不同的。然后后台find里面的里面自然就不同了。
      

  4. 查看网页源码 ,看看控件ID,估计ID混乱了
      


  5. 这是在引用该控件的页面上查看源的代码:
    <script src="/js/jquery_select.js" type="text/javascript"></script>
    <script type="text/javascript">
    function GetCityJson(obj, f) {
    var v = obj.value;
    if (f == 1 || f == 2) {
    $.ajax({
    type: "POST",
    dataType: "json",
    url: "/my_ascx/City_Json.ashx?val=" + v + "&Rnd=" + Math.random(),
    data: "",
    success: function (data) {
    if (f == 1) {
    $("#My_City1_City").clearAll();
    $("#My_City1_City").addOption("请选择", "");
    for (var i = 0; i < data.data.length; i++) {
    $("#My_City1_City").addOption(data.data[i].text, data.data[i].id);
    }
    $("#My_City1_Hid_value").val($("#My_City1_Province").val());
    $("#My_City1_Hid_text").val($("#My_City1_Province").getSelectedText());
    }
    else if (f == 2) {
    $("#My_City1_County").clearAll();
    $("#My_City1_County").addOption("请选择", "");
    for (var i = 0; i < data.data.length; i++) {
    $("#My_City1_County").addOption(data.data[i].text, data.data[i].id);
    }
    $("#My_City1_Hid_value").val($("#My_City1_City").val());
    $("#My_City1_Hid_text").val($("#My_City1_Province").getSelectedText() + $("#My_City1_City").getSelectedText());
    }
    }
    });
    }
    else {
    $("#My_City1_Hid_value").val($("#My_City1_County").val());
    $("#My_City1_Hid_text").val($("#My_City1_Province").getSelectedText() + $("#My_City1_City").getSelectedText() + $("#My_City1_County").getSelectedText());
    }
    }
    </script>
    <select name="My_City1$Province" id="My_City1_Province" onchange="GetCityJson(this,1)">
    <option value="">请选择</option>
    <option value="82">北京市</option>
    <option value="83">天津市</option>
    <option value="89">黑龙江省</option>
    <option value="84">河北省</option>
    <option value="85">山西省</option>
    <option value="86">内蒙古</option>
    <option value="87">辽宁省</option>
    <option value="88">吉林省</option>
    <option value="90">上海市</option>
    <option value="91">江苏省</option>
    <option value="92">浙江省</option>
    <option value="93">安徽省</option>
    <option value="94">福建省</option>
    <option value="95">江西省</option>
    <option value="96">山东省</option>
    <option value="97">河南省</option>
    <option value="98">湖北省</option>
    <option value="99">湖南省</option>
    <option value="100">广东省</option>
    <option value="101">广西省</option>
    <option value="102">海南省</option>
    <option value="103">重庆市</option>
    <option value="104">四川省</option>
    <option value="105">贵州省</option>
    <option value="106">云南省</option>
    <option value="107">西藏省</option>
    <option value="108">陕西省</option>
    <option value="109">甘肃省</option>
    <option value="110">青海省</option>
    <option value="111">宁夏省</option>
    <option value="112">新疆省</option>
    <option value="114">香港</option>
    <option value="115">澳门</option>
    <option value="113">台湾省</option>
    <option value="3374">国外</option>
    </select>
    <select name="My_City1$City" id="My_City1_City" onchange="GetCityJson(this,2)">
    <option value="">请选择</option>
    </select>
    <select name="My_City1$County" id="My_City1_County" onchange="GetCityJson(this,3)">
    <option value="">请选择</option>
    </select>
    <input type="hidden" name="My_City1$Hid_value" id="My_City1_Hid_value" value="0" />
    <input type="hidden" name="My_City1$Hid_text" id="My_City1_Hid_text" />
    <span id="My_City1_Lab_Text"></span>
    <br />
    <br />
    <br />
    <script src="/js/jquery_select.js" type="text/javascript"></script>
    <script type="text/javascript">
    function GetCityJson(obj, f) {
    var v = obj.value;
    if (f == 1 || f == 2) {
    $.ajax({
    type: "POST",
    dataType: "json",
    url: "/my_ascx/City_Json.ashx?val=" + v + "&Rnd=" + Math.random(),
    data: "",
    success: function (data) {
    if (f == 1) {
    $("#My_City2_City").clearAll();
    $("#My_City2_City").addOption("请选择", "");
    for (var i = 0; i < data.data.length; i++) {
    $("#My_City2_City").addOption(data.data[i].text, data.data[i].id);
    }
    $("#My_City2_Hid_value").val($("#My_City2_Province").val());
    $("#My_City2_Hid_text").val($("#My_City2_Province").getSelectedText());
    }
    else if (f == 2) {
    $("#My_City2_County").clearAll();
    $("#My_City2_County").addOption("请选择", "");
    for (var i = 0; i < data.data.length; i++) {
    $("#My_City2_County").addOption(data.data[i].text, data.data[i].id);
    }
    $("#My_City2_Hid_value").val($("#My_City2_City").val());
    $("#My_City2_Hid_text").val($("#My_City2_Province").getSelectedText() + $("#My_City2_City").getSelectedText());
    }
    }
    });
    }
    else {
    $("#My_City2_Hid_value").val($("#My_City2_County").val());
    $("#My_City2_Hid_text").val($("#My_City2_Province").getSelectedText() + $("#My_City2_City").getSelectedText() + $("#My_City2_County").getSelectedText());
    }
    }
    </script>
    <select name="My_City2$Province" id="My_City2_Province" onchange="GetCityJson(this,1)">
    <option value="">请选择</option>
    <option value="82">北京市</option>
    <option value="83">天津市</option>
    <option value="89">黑龙江省</option>
    <option value="84">河北省</option>
    <option value="85">山西省</option>
    <option value="86">内蒙古</option>
    <option value="87">辽宁省</option>
    <option value="88">吉林省</option>
    <option value="90">上海市</option>
    <option value="91">江苏省</option>
    <option value="92">浙江省</option>
    <option value="93">安徽省</option>
    <option value="94">福建省</option>
    <option value="95">江西省</option>
    <option value="96">山东省</option>
    <option value="97">河南省</option>
    <option value="98">湖北省</option>
    <option value="99">湖南省</option>
    <option value="100">广东省</option>
    <option value="101">广西省</option>
    <option value="102">海南省</option>
    <option value="103">重庆市</option>
    <option value="104">四川省</option>
    <option value="105">贵州省</option>
    <option value="106">云南省</option>
    <option value="107">西藏省</option>
    <option value="108">陕西省</option>
    <option value="109">甘肃省</option>
    <option value="110">青海省</option>
    <option value="111">宁夏省</option>
    <option value="112">新疆省</option>
    <option value="114">香港</option>
    <option value="115">澳门</option>
    <option value="113">台湾省</option>
    <option value="3374">国外</option></select>
    <select name="My_City2$City" id="My_City2_City" onchange="GetCityJson(this,2)">
    <option value="">请选择</option></select>
    <select name="My_City2$County" id="My_City2_County" onchange="GetCityJson(this,3)">
    <option value="">请选择</option></select>
    <input type="hidden" name="My_City2$Hid_value" id="My_City2_Hid_value" value="0" />
    <input type="hidden" name="My_City2$Hid_text" id="My_City2_Hid_text" />
    <span id="My_City2_Lab_Text"></span>
      

  6. 参考下面例子,在网页中拉了四个用户控件,是能正常运行:
    http://www.cnblogs.com/insus/archive/2012/10/16/2725307.htmlhttp://www.cnblogs.com/insus/archive/2012/10/16/2725307.html
      

  7. 这种问题ajax例子多的是
    也可以纯Html + js解决(将地区数据放入js数组中,作为js文件引用)
      

  8. js方法有两个的问题,GetCityJson  里面的ID又对每个控件固定。改造一下GetCityJson  通过obj去取控件
      

类似问题 »