Asp.Net 省市级联问题，望大神指点！！！

Question

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

Answer 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>

Answer 2

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

Answer 3

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

Answer 4

查看网页源码 ，看看控件ID，估计ID混乱了

Answer 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>

Answer 6

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

Answer 7

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

Answer 8

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