4当前位置:网页制作JavaScript教程-又一个全国省市双级联动下拉选择框
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
4本站推荐内容
4最新网页制作
·点击复制本页网址的…
·新版浏览器实现图片…
·JavaScript拖放效果…
·ajax跨域的三种方法
·浅谈几种常用的嵌套…
·JS控制表格行间色和…
·JavaScript自动判断…
·JS让广告不影响网页…
·JS结合Cookies记录I…
·JS实现页面跳转的五…
4热门网页制作
·网页自动适应客户端…
·JS网页加载进度条
·突破IE屏蔽限制弹出…
·三级下拉联动链接菜单
·文本框控制字数和禁…
·33个JavaScript经典…
·JS获取页面地址栏参数
·JavaScript去除空格…
·又一个全国省市双级…
·全国省市县无刷新多…
4相关网页制作
·33个JavaScript经典…
·JScript中正则表达…
·正则表达式的基本语法
·判断输入的IP是否合法
·收集整理了一些java…
·JS的IE和Firefox兼…
·判断浏览器是否支持…
·马赛克图片幻灯效果
·三级下拉联动链接菜单
·33个JavaScript经典…
又一个全国省市双级联动下拉选择框
类别:JavaScript教程    来源:网络    时间:2006-5-11    贴士:推荐给好友
收藏本页 8 
完整的代码如下:
<html>
<head>
<title>全国省市双级联动下拉选择框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<script language="JavaScript">
<!--
//二级菜单
var hw_selecttext ="北京|东城^西城^崇文^宣武^朝阳^丰台^石景山^海淀^门头沟^房山^通州^顺义^昌平^大兴^平谷^怀柔^密云^延庆*上海|黄浦^卢湾^徐汇^长宁^静安^普陀^闸北^虹口^杨浦^闵行^宝山^嘉定^浦东^金山^松江^青浦^南汇^奉贤^崇明*天津|和平^东丽^河东^西青^河西^津南^南开^北辰^河北^武清^红挢^塘沽^汉沽^大港^宁河^静海^宝坻^蓟县*重庆|万州^涪陵^渝中^大渡口^江北^沙坪坝^九龙坡^南岸^北碚^万盛^双挢^渝北^巴南^黔江^长寿^綦江^潼南^铜梁^大足^荣昌^壁山^梁平^城口^丰都^垫江^武隆^忠县^开县^云阳^奉节^巫山^巫溪^石柱^秀山^酉阳^彭水^江津^合川^永川^南川*河北|石家庄^邯郸^邢台^保定^张家口^承德^廊坊^唐山^秦皇岛^沧州^衡水*山西|太原^大同^阳泉^长治^晋城^朔州^吕梁^忻州^晋中^临汾^运城*内蒙古|呼和浩特^包头^乌海^赤峰^呼伦贝尔盟^阿拉善盟^哲里木盟^兴安盟^乌兰察布盟^锡林郭勒盟^巴彦淖尔盟^伊克昭盟*辽宁|沈阳^大连^鞍山^抚顺^本溪^丹东^锦州^营口^阜新^辽阳^盘锦^铁岭^朝阳^葫芦岛*吉林|长春^吉林^四平^辽源^通化^白山^松原^白城^延边*黑龙江|哈尔滨^齐齐哈尔^牡丹江^佳木斯^大庆^绥化^鹤岗^鸡西^黑河^双鸭山^伊春^七台河^大兴安岭*江苏|南京^镇江^苏州^南通^扬州^盐城^徐州^连云港^常州^无锡^宿迁^泰州^淮安*浙江|杭州^宁波^温州^嘉兴^湖州^绍兴^金华^衢州^舟山^台州^丽水*安徽|合肥^芜湖^蚌埠^马鞍山^淮北^铜陵^安庆^黄山^滁州^宿州^池州^淮南^巢湖^阜阳^六安^宣城^亳州*福建|福州^厦门^莆田^三明^泉州^漳州^南平^龙岩^宁德*江西|南昌市^景德镇^九江^鹰潭^萍乡^新馀^赣州^吉安^宜春^抚州^上饶*山东|济南^青岛^淄博^枣庄^东营^烟台^潍坊^济宁^泰安^威海^日照^莱芜^临沂^德州^聊城^滨州^菏泽*河南|郑州^开封^洛阳^平顶山^安阳^鹤壁^新乡^焦作^濮阳^许昌^漯河^三门峡^南阳^商丘^信阳^周口^驻马店^济源*湖北|武汉^宜昌^荆州^襄樊^黄石^荆门^黄冈^十堰^恩施^潜江^天门^仙桃^随州^咸宁^孝感^鄂州*湖南|长沙^常德^株洲^湘潭^衡阳^岳阳^邵阳^益阳^娄底^怀化^郴州^永州^湘西^张家界*广东|广州^深圳^珠海^汕头^东莞^中山^佛山^韶关^江门^湛江^茂名^肇庆^惠州^梅州^汕尾^河源^阳江^清远^潮州^揭阳^云浮*广西|南宁^柳州^桂林^梧州^北海^防城港^钦州^贵港^玉林^南宁地区^柳州地区^贺州^百色^河池*海南|海口^三亚*四川|成都^绵阳^德阳^自贡^攀枝花^广元^内江^乐山^南充^宜宾^广安^达川^雅安^眉山^甘孜^凉山^泸州*贵州|贵阳^六盘水^遵义^安顺^铜仁^黔西南^毕节^黔东南^黔南*云南|昆明^大理^曲靖^玉溪^昭通^楚雄^红河^文山^思茅^西双版纳^保山^德宏^丽江^怒江^迪庆^临沧*西藏|拉萨^日喀则^山南^林芝^昌都^阿里^那曲*陕西|西安^宝鸡^咸阳^铜川^渭南^延安^榆林^汉中^安康^商洛*甘肃|兰州^嘉峪关^金昌^白银^天水^酒泉^张掖^武威^定西^陇南^平凉^庆阳^临夏^甘南*宁夏|银川^石嘴山^吴忠^固原*青海|西宁^海东^海南^海北^黄南^玉树^果洛^海西*新疆|乌鲁木齐^石河子^克拉玛依^伊犁^巴音郭勒^昌吉^克孜勒苏柯尔克孜^博尔塔拉^吐鲁番^哈密^喀什^和田^阿克苏*香港|*澳门|*台湾|台北^高雄^台中^台南^屏东^南投^云林^新竹^彰化^苗栗^嘉义^花莲^桃园^宜兰^基隆^台东^金门^马祖^澎湖*其它|北美洲^南美洲^亚洲^非洲^欧洲^大洋洲"
//如果文本与值不同,请输入在文本后加上@值,如:北京@010|东城@001^西城@002
var TheSplit1 = "*"  //北京与上海的分隔符
var TheSplit2 = "|"  //北京与东城的分隔符
var TheSplit3 = "^"  //东城与西城的分隔符
var TheSplit4 = "@"  //文本与值的分隔符,可以省略
var hwallselecttext = hw_selecttext
var hwdefault_value = "山东济宁"
//默认值,在值有相同时有bug。
document.write('<select name="hw_1" onChange = "hw_select()"></select> <select name="hw_2" onChange = "hw_select()"></select> <input class="input" size="15" type="input" value="'+hwdefault_value+'" name="hw">\n');
var hwallselecttextarr
hwallselecttextarr = hwallselecttext.split(TheSplit1)
hwArraylength = hwallselecttextarr.length
var hwwhere = new Array(hwArraylength);
hwwhere[0]= new hw_comefrom("请选择@","请选择@");

for (var hwl=0;hwl<hwArraylength;hwl++)
{
 eval(hwwhere[hwl+1] = new hw_comefrom(hwallselecttextarr[hwl].split(TheSplit2)[0],hwallselecttextarr[hwl].split(TheSplit2)[1]))
}
function hw_comefrom(hwSelect_s1,hwSelect_s2) { this.hwSelect_s1 = hwSelect_s1; this.hwSelect_s2 = hwSelect_s2; } 

function hw_select()
{
 with(document.all.hw_1)
 {
  var hwSelect_s12 = options[selectedIndex].value;
 }
 for(hwi = 0;hwi < hwwhere.length;hwi ++)
 {
  if (hwwhere[hwi].hwSelect_s1.indexOf(TheSplit4)!=-1)
  {
   var hwThisV = hwwhere[hwi].hwSelect_s1.split(TheSplit4)[1]
  }
  else
  {
   var hwThisV = hwwhere[hwi].hwSelect_s1
  }
  if (hwThisV == hwSelect_s12)
  {
   hwSelect_s13 = (hwwhere[hwi].hwSelect_s2).split(TheSplit3);
   for(hwj = 0;hwj < hwSelect_s13.length;hwj++)
   {
    with(document.all.hw_2)
    {
     length = hwSelect_s13.length;
     if (hwSelect_s13[hwj].indexOf(TheSplit4)!=-1)
     {
      options[hwj].text = hwSelect_s13[hwj].split(TheSplit4)[0]
      options[hwj].value = hwSelect_s13[hwj].split(TheSplit4)[1]
     }
     else
     {
      options[hwj].text = hwSelect_s13[hwj];
      options[hwj].value = hwSelect_s13[hwj];
     }
     var hwSelect_s14=options[selectedIndex].value;
    }
   }
  break;
  }
 }
 document.all.hw.value=hwSelect_s12+""+hwSelect_s14;
}
function hw_init()
{
 with(document.all.hw_1)
 {
  length = hwwhere.length;
  var hwm = 0
  for(hwk=0;hwk<hwwhere.length;hwk++)
  {
   if (hwwhere[hwk].hwSelect_s1.indexOf(TheSplit4)!=-1)
   {
    options[hwk].text = hwwhere[hwk].hwSelect_s1.split(TheSplit4)[0];
    options[hwk].value = hwwhere[hwk].hwSelect_s1.split(TheSplit4)[1];
    if (hwdefault_value.indexOf(hwwhere[hwk].hwSelect_s1.split(TheSplit4)[1])!=-1){hwm = hwk}
   }
   else
   {
    options[hwk].text = hwwhere[hwk].hwSelect_s1;
    options[hwk].value = hwwhere[hwk].hwSelect_s1;
    if (hwdefault_value.indexOf(hwwhere[hwk].hwSelect_s1)!=-1){hwm = hwk}
   }
  }
  selectedIndex = hwm
 }
 with(document.all.hw_2)
 {
  var hwn = 0
  hwSelect_s13 = (hwwhere[hwm].hwSelect_s2).split(TheSplit3);
  length = hwSelect_s13.length;
  for(hwl=0;hwl<length;hwl++)
  {
   if (hwSelect_s13[hwl].indexOf(TheSplit4)!=-1)
   {
    options[hwl].text = hwSelect_s13[hwl].split(TheSplit4)[0];
    options[hwl].value = hwSelect_s13[hwl].split(TheSplit4)[1];
    if (hwdefault_value.indexOf(hwSelect_s13[hwl].split(TheSplit4)[1])!=-1){hwn = hwl}
   }
   else
   {
    options[hwl].text = hwSelect_s13[hwl];
    options[hwl].value = hwSelect_s13[hwl];
    if (hwdefault_value.indexOf(hwSelect_s13[hwl])!=-1){hwn = hwl}
   }
  }
  selectedIndex = hwn
 }
}
hw_init();
//-->
</script>
</body>
</html>
·上一篇:左右选择添加、删除菜单内容
·下一篇:三级下拉联动链接菜单
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2008 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备08002933号