[转贴]无刷新的2个DropDownList联动

该博客展示了一段JavaScript代码,实现了省市联动的下拉框功能。代码中定义了省市数据数组,通过函数实现省份和城市的选择交互,同时包含了初始化和点击按钮输出所选省市信息的功能,还涉及到ASP.NET的部分代码处理页面加载和按钮点击事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

None.gif    <script language="javascript">
None.gif
<!--
None.gif
var where = new Array(36); 
None.gif
function comefrom(loca,locacity) { this.loca = loca; this.locacity = locacity; } 
None.gifwhere[
0]= new comefrom("==请选择==","==请选择==");
None.gifwhere[
1= new comefrom("北京","|东城|西城|崇文|宣武|朝阳|丰台|石景山|海淀|门头沟|房山|通州|顺义|昌平|大兴|平谷|怀柔|密云|延庆"); 
None.gifwhere[
2= new comefrom("上海","|黄浦|卢湾|徐汇|长宁|静安|普陀|闸北|虹口|杨浦|闵行|宝山|嘉定|浦东|金山|松江|青浦|南汇|奉贤|崇明"); 
None.gifwhere[
3= new comefrom("天津","|和平|东丽|河东|西青|河西|津南|南开|北辰|河北|武清|红挢|塘沽|汉沽|大港|宁河|静海|宝坻|蓟县"); 
None.gifwhere[
4= new comefrom("重庆","|万州|涪陵|渝中|大渡口|江北|沙坪坝|九龙坡|南岸|北碚|万盛|双挢|渝北|巴南|黔江|长寿|綦江|潼南|铜梁|大足|荣昌|壁山|梁平|城口|丰都|垫江|武隆|忠县|开县|云阳|奉节|巫山|巫溪|石柱|秀山|酉阳|彭水|江津|合川|永川|南川"); 
None.gifwhere[
5= new comefrom("河北","|石家庄|邯郸|邢台|保定|张家口|承德|廊坊|唐山|秦皇岛|沧州|衡水"); 
None.gifwhere[
6= new comefrom("山西","|太原|大同|阳泉|长治|晋城|朔州|吕梁|忻州|晋中|临汾|运城"); 
None.gifwhere[
7= new comefrom("内蒙古","|呼和浩特|包头|乌海|赤峰|呼伦贝尔盟|阿拉善盟|哲里木盟|兴安盟|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|伊克昭盟"); 
None.gifwhere[
8= new comefrom("辽宁","|沈阳|大连|鞍山|抚顺|本溪|丹东|锦州|营口|阜新|辽阳|盘锦|铁岭|朝阳|葫芦岛"); 
None.gifwhere[
9= new comefrom("吉林","|长春|吉林|四平|辽源|通化|白山|松原|白城|延边"); 
None.gifwhere[
10= new comefrom("黑龙江","|哈尔滨|齐齐哈尔|牡丹江|佳木斯|大庆|绥化|鹤岗|鸡西|黑河|双鸭山|伊春|七台河|大兴安岭"); 
None.gifwhere[
11= new comefrom("江苏","|南京|镇江|苏州|南通|扬州|盐城|徐州|连云港|常州|无锡|宿迁|泰州|淮安|丹徒|丹阳|张家港|太仓|昆山|吴江|海门|如皋|如东|扬中|东台|溧阳|武进|江阴|锡山|宜兴|金坛"); 
None.gifwhere[
12= new comefrom("浙江","|杭州|宁波|温州|嘉兴|湖州|绍兴|金华|衢州|舟山|台州|丽水"); 
None.gifwhere[
13= new comefrom("安徽","|合肥|芜湖|蚌埠|马鞍山|淮北|铜陵|安庆|黄山|滁州|宿州|池州|淮南|巢湖|阜阳|六安|宣城|亳州"); 
None.gifwhere[
14= new comefrom("福建","|福州|厦门|莆田|三明|泉州|漳州|南平|龙岩|宁德"); 
None.gifwhere[
15= new comefrom("江西","|南昌市|景德镇|九江|鹰潭|萍乡|新馀|赣州|吉安|宜春|抚州|上饶"); 
None.gifwhere[
16= new comefrom("山东","|济南|青岛|淄博|枣庄|东营|烟台|潍坊|济宁|泰安|威海|日照|莱芜|临沂|德州|聊城|滨州|菏泽"); 
None.gifwhere[
17= new comefrom("河南","|郑州|开封|洛阳|平顶山|安阳|鹤壁|新乡|焦作|濮阳|许昌|漯河|三门峡|南阳|商丘|信阳|周口|驻马店|济源"); 
None.gifwhere[
18= new comefrom("湖北","|武汉|宜昌|荆州|襄樊|黄石|荆门|黄冈|十堰|恩施|潜江|天门|仙桃|随州|咸宁|孝感|鄂州");
None.gifwhere[
19= new comefrom("湖南","|长沙|常德|株洲|湘潭|衡阳|岳阳|邵阳|益阳|娄底|怀化|郴州|永州|湘西|张家界"); 
None.gifwhere[
20= new comefrom("广东","|广州|深圳|珠海|汕头|东莞|中山|佛山|韶关|江门|湛江|茂名|肇庆|惠州|梅州|汕尾|河源|阳江|清远|潮州|揭阳|云浮"); 
None.gifwhere[
21= new comefrom("广西","|南宁|柳州|桂林|梧州|北海|防城港|钦州|贵港|玉林|南宁地区|柳州地区|贺州|百色|河池"); 
None.gifwhere[
22= new comefrom("海南","|海口|三亚"); 
None.gifwhere[
23= new comefrom("四川","|成都|绵阳|德阳|自贡|攀枝花|广元|内江|乐山|南充|宜宾|广安|达川|雅安|眉山|甘孜|凉山|泸州"); 
None.gifwhere[
24= new comefrom("贵州","|贵阳|六盘水|遵义|安顺|铜仁|黔西南|毕节|黔东南|黔南"); 
None.gifwhere[
25= new comefrom("云南","|昆明|大理|曲靖|玉溪|昭通|楚雄|红河|文山|思茅|西双版纳|保山|德宏|丽江|怒江|迪庆|临沧");
None.gifwhere[
26= new comefrom("西藏","|拉萨|日喀则|山南|林芝|昌都|阿里|那曲"); 
None.gifwhere[
27= new comefrom("陕西","|西安|宝鸡|咸阳|铜川|渭南|延安|榆林|汉中|安康|商洛"); 
None.gifwhere[
28= new comefrom("甘肃","|兰州|嘉峪关|金昌|白银|天水|酒泉|张掖|武威|定西|陇南|平凉|庆阳|临夏|甘南"); 
None.gifwhere[
29= new comefrom("宁夏","|银川|石嘴山|吴忠|固原"); 
None.gifwhere[
30= new comefrom("青海","|西宁|海东|海南|海北|黄南|玉树|果洛|海西"); 
None.gifwhere[
31= new comefrom("新疆","|乌鲁木齐|石河子|克拉玛依|伊犁|巴音郭勒|昌吉|克孜勒苏柯尔克孜|博尔塔拉|吐鲁番|哈密|喀什|和田|阿克苏"); 
None.gifwhere[
32= new comefrom("香港",""); 
None.gifwhere[
33= new comefrom("澳门",""); 
None.gifwhere[
34= new comefrom("台湾","|台北|高雄|台中|台南|屏东|南投|云林|新竹|彰化|苗栗|嘉义|花莲|桃园|宜兰|基隆|台东|金门|马祖|澎湖"); 
None.gifwhere[
35= new comefrom("国外","|北美洲|南美洲|亚洲|非洲|欧洲|大洋洲"); 
None.gif
function select() 
None.gif{  
None.gif   
// var obj=document.getElementById("Lable1");
None.gif
   // obj.Text="dssd";
None.gif
    //document.all.
None.gif
   // obj.Text=province.options[province.selectedIndex].value;
None.gif
    with(document.all.Form1.province) 
None.gif    { 
None.gif        
var loca2 = options[selectedIndex].value; 
None.gif        document.all.HiddenValue.value 
= loca2;
None.gif    }
None.gif    
for(i = 0;i < where.length;i++
None.gif    {
None.gif        
if (where[i].loca == loca2) 
None.gif            {
None.gif            loca3 
= (where[i].locacity).split("|");
None.gif                
for(j = 1;j < loca3.length;j++
None.gif                { 
None.gif                    
with(document.all.Form1.city) 
None.gif                        { 
None.gif                            length 
= loca3.length; 
None.gif                            options[j].text 
= loca3[j]; 
None.gif                            options[j].value 
= loca3[j];
None.gif                            
None.gif                        }
None.gif                }
None.gif            
break;
None.gif            }
None.gif        }
None.gif        
with(document.all.Form1.city) 
None.gif        { 
None.gif            options[
0].selected = true;
None.gif        }
None.gif    
//document.creator.address.value=loca2+loca4;
None.gif
}
None.gif
function select1() {
None.gif    
with(document.all.Form1.city) 
None.gif    {
None.gif        
var loca4=options[selectedIndex].value;
None.gif        document.all.HiddenValueshi.value 
= loca4;
None.gif    }
None.gif}
None.gif
None.gif
function init() {
None.gif     
var cprin;
None.gif     
None.gif    
with(document.all.Form1.province) 
None.gif    {
None.gif        length 
= where.length;
None.gif        
for(k=0;k<where.length;k++
None.gif        {  
None.gif            options[k].text 
= where[k].loca; 
None.gif            options[k].value 
= where[k].loca; 
None.gif            
if (where[k].loca==document.all.HiddenValue.value)
None.gif             cprin
=where[k].locacity;
None.gif        }
None.gif    
None.gif        
None.gif        
if (document.all.HiddenValue.value=="")
None.gif          {options[selectedIndex].text 
= where[0].loca;
None.gif           options[selectedIndex].value 
= where[0].loca;
None.gif          }
None.gif        
else
None.gif        {
None.gif          options[selectedIndex].text
=document.all.HiddenValue.value;
None.gif          options[selectedIndex].value
=document.all.HiddenValue.value;
None.gif        } 
None.gif    }
None.gif    
with(document.all.Form1.city) 
None.gif    {
None.gif        
None.gif        
if (document.all.HiddenValueshi.value=="")
None.gif        {
None.gif            loca3 
= (where[0].locacity).split("|");
None.gif            length 
= loca3.length;
None.gif            
for(l=0;l<length;l++
None.gif            { 
None.gif                options[l].text 
= loca3[l]; options[l].value = loca3[l]; 
None.gif            }
None.gif          
None.gif           options[selectedIndex].text 
= where[0].loca; options[selectedIndex].value = where[0].loca;
None.gif         }
None.gif         
else
None.gif         {
None.gif         
None.gif           loca3 
= cprin.split("|");
None.gif            length 
= loca3.length;
None.gif            
for(l=0;l<length;l++
None.gif            { 
None.gif                options[l].text 
= loca3[l]; options[l].value = loca3[l]; 
None.gif            }
None.gif           options[selectedIndex].text
=document.all.HiddenValueshi.value;
None.gif           options[selectedIndex].value
=document.all.HiddenValueshi.value;
None.gif         } 
None.gif           
None.gif    }
None.gif}
None.gif 
None.gif
-->
None.gif        
</script>


None.gif<body MS_POSITIONING="GridLayout" onload="init();">
None.gif        
<form id="Form1" method="post" runat="server">
None.gif            
<asp:dropdownlist id="province" Runat="server"></asp:dropdownlist><asp:dropdownlist id="city" Runat="server"></asp:dropdownlist></SELECT><asp:button id="Button1" style="Z-INDEX: 101; LEFT: 240px; POSITION: absolute; TOP: 48px" runat="server"
None.gif                Text
="Button"></asp:button><asp:label id="Label1" style="Z-INDEX: 102; LEFT: 280px; POSITION: absolute; TOP: 136px" runat="server">Label</asp:label><input id="HiddenValue" type="hidden" name="HiddenValue" runat="server">
None.gif            
<input id="HiddenValueshi" type="hidden" name="HiddenValueshi" runat="server">
None.gif    
</form>
None.gif    
</body>

ExpandedBlockStart.gifContractedBlock.gif Private Sub Page_Load()Sub Page_Load(ByVal sender As System.ObjectByVal e As System.EventArgs) Handles MyBase.Load
InBlock.gif        
'If Not Page.IsStartupScriptRegistered("init") Then
InBlock.gif
        ' Page.RegisterStartupScript("init", "<script>init();</script>")
InBlock.gif
        'End If
InBlock.gif

InBlock.gif        
If Not IsPostBack Then
InBlock.gif
InBlock.gif            province.Attributes.Add(
"onchange""select()")
InBlock.gif            city.Attributes.Add(
"onchange""select1()")
InBlock.gif
InBlock.gif        
End If
InBlock.gif
ExpandedBlockEnd.gif    
End Sub

None.gif
ExpandedBlockStart.gifContractedBlock.gif    
Private Sub Button1_Click()Sub Button1_Click(ByVal sender As ObjectByVal e As System.EventArgs) Handles Button1.Click
InBlock.gif        Response.
Write(HiddenValue.Value)
InBlock.gif        Response.
Write(HiddenValueshi.Value)
InBlock.gif
ExpandedBlockEnd.gif    
End Sub
这个是ajax 实现DropDownList刷新联动。里面有数据库结构和内容,表结构的是sql2000的, 关键代码: <SCRIPT language="javascript"> //城市------------------------------ function cityResult() { var city=document.getElementById("DropDownList1"); AjaxMethod.GetCityList(city.value,get_city_Result_CallBack); } function get_city_Result_CallBack(response) { if (response.value != null) { //debugger; document.all("DropDownList2").length=0;          var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++)      {      var name=ds.Tables[0].Rows[i].CityName;        var id=ds.Tables[0].Rows[i].ProvinceID;        document.all("DropDownList2").options.add(new Option(name,id));      } } } else { document.all("DropDownList2").length=0; } return } //市区---------------------------------------- function areaResult() { var area=document.getElementById("DropDownList2"); AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack); } function get_area_Result_CallBack(response) { if (response.value != null) { document.all("DropDownList3").length=0;          var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++)      {        var name=ds.Tables[0].Rows[i].ProvinceName;        var id=ds.Tables[0].Rows[i].id;        document.all("DropDownList3").options.add(new Option(name,id));      } } } else { document.all("DropDownList3").length=0; } return } </SCRIPT>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值