`
飞天小女警
  • 浏览: 107176 次
  • 性别: Icon_minigender_2
  • 来自: 重庆
社区版块
存档分类
最新评论

JS经典的二级联动——省份联动下级城市

JavaScriptHTML 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="title" content="Samples" />
  <meta name="keywords" content="" />

 <meta name="description" content="" />
<script type="text/javascript">
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
     var city=[
["北京","天津","上海","重庆","香港","澳门"],
     ["石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"],
     ["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"],
     ["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","兴安","锡林郭勒","阿拉善"],
     ["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"],
     ["长春","吉林","四平","辽源","通化","白山","松原","白城","延边"],
     ["哈尔滨","齐齐哈尔","鸡西","鹤岗","双鸭山","大庆","伊春","佳木斯","七台河","牡丹江","黑河","绥化","大兴安岭"],
     ["南京","苏州","扬州","无锡","徐州","常州","南通","连云港","淮安","盐城","镇江","泰州","宿迁"],
     ["杭州","宁波","温州","嘉兴","湖州","绍兴","金华","衢州","舟山","台州","丽水"],
     ["合肥","芜湖","蚌埠","淮南","马鞍山","淮北","铜陵","安庆","黄山","滁州","阜阳","宿州","巢湖","六安","亳州","池州","宣城"],
     ["福州","宁德","南平","厦门","莆田","三明","泉州","漳州"],
     ["南昌","上饶","萍乡","九江","景德镇","新余","鹰潭","赣州","吉安","宜春","抚州"],
     ["济南","青岛","淄博","枣庄","东营","烟台","潍坊","威海","济宁","泰安","日照","莱芜","临沂","德州","聊城","滨州","菏泽"],
     ["郑州","开封","洛阳","平顶山","焦作","鹤壁","新乡","安阳","濮阳","漯河","许昌","三门峡","南阳","商丘","信阳","周口","驻马店"],
     ["武汉","十堰","襄樊","鄂州","黄石","荆州","宜昌","荆门","孝感","黄冈","咸宁","随州","恩施"],
     ["长沙","株洲","湘潭","岳阳","邵阳","常德","衡阳","张家界","益阳","郴州","永州","怀化","娄底","湘西"],
     ["广州","清远","潮州","东莞","珠海","深圳","汕头","韶关","佛山","江门","湛江","茂名","肇庆","惠州","梅州","汕尾","阳江","河源","中山","揭阳","云浮"],
     ["南宁","柳州","桂林","梧州","北海","防城港","钦州","贵港","玉林","百色","贺州","河池","来宾","崇左"],
     ["海口","三亚"],
     ["成都","自贡","攀枝花","泸州","德阳","绵阳","广元","遂宁","内江","乐山","南充","宜宾","广安","达州","眉山","雅安","巴中","资阳","阿坝","甘孜","凉山"],
     ["贵阳","六盘水","遵义","安顺","铜仁","毕节","黔西南","黔东南","黔南"],
     ["昆明","曲靖","玉溪","保山","昭通","丽江","普洱","临沧","文山","红河","西双版纳","楚雄","大理","德宏","怒江","迪庆"],
     ["拉萨","昌都","山南","日喀则","那曲","阿里","林芝"],
     ["西安","铜川","宝鸡","咸阳","渭南","延安","汉中","榆林","安康","商洛"],
     ["兰州","白银","定西","敦煌","嘉峪关","金昌","天水","武威","张掖","平凉","酒泉","庆阳","临夏","陇南","甘南"],
     ["西宁","海东","海北","黄南","海南","果洛","玉树","海西"],
     ["银川","石嘴山","吴忠","固原","中卫"],
     ["乌鲁木齐","克拉玛依","吐鲁番","哈密","和田","阿克苏","喀什","克孜勒苏柯尔克孜","巴音郭楞蒙古","昌吉","博尔塔拉蒙古","伊犁哈萨克","阿勒泰"],
     ["台北","高雄","基隆","台中","台南","新竹","嘉义"]
     ];

     function getCity(){
         //获得省份下拉框的对象
         var sltProvince=document.forms[0].province;
         //获得城市下拉框的对象
         var sltCity=document.forms[0].city;
        
         //得到对应省份的城市数组
         var provinceCity=city[sltProvince.selectedIndex - 1];

         //清空城市下拉框，仅留提示选项
         sltCity.length=1;

         //将城市数组中的值填充到城市下拉框中

        if(provinceCity != null && provinceCity.length > 0){
            for(var i=0;i<provinceCity.length;i++){
                sltCity[i+1]=new Option(provinceCity[i], i);
            }

        }
     }
</script>
</HEAD>
<BODY>
<form name="f1">
<table>
   <tr>
    <td><select name="province" onChange="getCity()">
       <option value="" selected="selected">请选择所在省份</option>
        <option value="直辖市">直辖市</option>
        <option value="河北">河北</option>
        <option value="山西">山西</option>
          <option value="内蒙古">内蒙古</option>
            <option value="辽宁">辽宁</option>
          <option value="吉林">吉林</option>
          <option value="黑龙江">黑龙江</option>
          <option value="江苏">江苏</option>
          <option value="浙江">浙江</option>
          <option value="安徽">安徽 </option>
        <option value="福建">福建 </option>
          <option value="江西">江西</option>
            <option value="山东">山东</option>
          <option value="河南">河南</option>
          <option value="湖北">湖北</option>
          <option value="湖南">湖南</option>
          <option value="广东">广东</option>
          <option value="广西">广西</option>
            <option value="海南">海南</option>
          <option value="四川">四川</option>
          <option value="贵州">贵州</option>
          <option value="云南">云南</option>
          <option value="西藏">西藏</option>
          <option value="陕西">陕西 </option>
        <option value="甘肃">甘肃 </option>
          <option value="青海">青海</option>
            <option value="宁夏">宁夏</option>
          <option value="新疆">新疆</option>
          <option value="台湾">台湾</option>   
         </select>
     <select name="city">
          <option selected="selected" value="">请选择所在城市</option>
          </select></td></tr>
     </table></form>
</BODY>
</HTML>

分享到：
| 软件后期开发中的版本控制总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js省市区二级联动和三级联动下拉菜单

    二级联动的省市区选择菜单，通常包含两个下拉菜单，第一个是省份，第二个是城市。当用户在省份下拉菜单中选择一个省份时，城市下拉菜单会自动更新为对应省份的城市列表。这种联动效果可以通过监听省份下拉菜单的...

    省市县三级联动——轻松完美嵌入项目中（更适合于初学者）

    例如，当用户在第一级选择省份时，第二级的市将根据所选省份动态加载；接着，当用户在第二级选择城市后，第三级的县或区也会相应地更新。这种功能常用于地址选择、地区筛选等场景，提高了用户体验并减少了输入错误。...

    js省市二级、三级联动完美代码

    在JavaScript编程中，省市二级或三级联动是一种常见的交互设计，常用于地址选择或者地区筛选等场景。这种联动效果可以通过JS动态地更新下拉菜单选项，根据用户在上级选择中的变化来展示相应的下级地区列表。下面我们...

    最标准，最齐全的js全国城市三级联动

    2. 全国城市数据：实现JS三级联动首先需要一个完整的全国城市数据库，包括省份、城市和区县的数据。这些数据通常以JSON格式存储，便于JS进行解析和操作。 二、实现步骤 1. 数据准备：整理全国城市的数据，将其组织...

    js二级和三级联动

    在JavaScript编程中，"二级联动"和"三级联动"是一种常见的交互设计，通常用于实现下拉菜单或选项选择的功能。这种技术在网页表单、数据筛选、导航菜单等场景中非常常见，它允许用户根据先前的选择来动态更新后续的...

    全国省市区街道四级联动JSON，JS文件

    四级联动指的是在一个交互系统中，用户可以选择四个层次的地理区域，通常是国家、省份、城市和区县或街道。这种设计让用户能够快速精确地定位到某个具体位置，常见于电子商务、地图服务和物流配送等领域。 2. **...

    Java二级联动

    在IT行业中，二级联动是一种常见的数据交互和展示方式，尤其在网页设计和前端开发中广泛使用。它通常指的是两个或多个下拉菜单之间存在的联动关系，例如在选择省份后，城市下拉菜单会自动更新为对应省份的城市列表，...

    安卓三级联动省市联动多级联动相关-Android竖直滑动选择器三级联动二级联动.rar

    这个压缩包"安卓三级联动省市联动多级联动相关-Android竖直滑动选择器三级联动二级联动.rar"包含了实现这一功能的相关代码资源。下面将详细解释这个功能的实现原理及关键知识点。 1. **联动选择器**: 联动选择器...

    js+jsp三级联动 源码

    这里，我们主要探讨的是使用JavaScript（js）和JavaServer Pages（jsp）来创建一个具有三级联动功能的系统。这种功能常见于诸如地区选择、产品分类等场景，用户在一个下拉框中做出选择时，其他关联的下拉框会根据...

    mysql 城市地区四级联动 sql文件 加城市等级和上下关联和城市

    mysql 城市地区四级联动 sql文件 省市县镇（区）四级城市表 带城市等级和上下关联的父子城市 sql文件

    移动端、h5省市区三级联动

    首先，"三级联动"指的是在选择地址时，用户先选择省份，接着在省份的基础上展示对应的城市选项，最后再根据城市显示出对应的区县。这种联动效果能够减少用户输入，提高用户体验。 1. **前端技术选型**：在这个案例...

    JavaScript全国三级联动

    在这个场景下，用户可以从一个下拉菜单中选择省份，接着选择城市，最后确定区县，这三个级别之间存在着联动关系，即选择一个上级选项后，下级选项会相应地更新。这种功能在电子商务网站、地图应用以及各种需要收集...

    省市县三级、省市二级联动菜单

    标题中的“省市县三级、省市二级联动菜单”指的是在网页设计中常见的下拉菜单功能，这种功能常用于地理信息选择，如用户填写地址时选择所在省份、城市和区县。这种联动效果意味着当用户在一级菜单（省份）中选择一个...

    非常好用的城市三级联动或者分类三级联动

    例如，在城市选择中，一级可能是国家，二级是省份，三级是城市。在分类中，一级可能是一类大类别，二级是细分领域，三级是更具体的子类别。 这个项目适用于以下情况： 1. 电商网站的商品分类，如一级为“服装”，二...

    js全国三级联动

    这个功能利用JavaScript（简称js）来实现省、市、区三级数据的联动，即用户在选择一级区域（如省份）时，二级区域（如城市）会根据所选的一级区域自动更新，同理，选择二级区域后，三级区域（如区县）也会相应地变化...

    html+js实现地区三级联动下拉菜单

    这个组件通常由三个下拉菜单组成，分别代表省份、城市和区县，用户在选择上一级时，下一级的选项会根据上一级的选择动态更新。这种功能在注册、地址填写等场景中十分常见。本示例是用HTML和JavaScript实现的，无需...

    android 城市三级联动

    在Android开发中，城市三级联动是一种常见的功能，用于在用户选择城市时提供省-市-区的逐级筛选。这个功能通常用在地址输入、物流配送等场景，它需要一个高效的UI交互和数据管理机制。下面我们将深入探讨如何实现这...

    JS 实现 三级、多级联动

    "JS 实现 三级、多级联动"是指使用JavaScript编程语言来创建一个能够处理多级选择的交互功能，例如在商品分类、地区选择等场景下，用户在一个下拉框中选择一个选项后，下一个下拉框会根据前一个选项的值动态更新其...

    省市区三级联动js脚本

    ### 省市区三级联动JS脚本知识点解析 #### 一、概述 省市区三级联动是一种常见的用户界面设计模式，通常用于需要用户选择地址信息（如省份、城市、区县）的应用场景。通过这种设计模式，可以实现当用户选择了某一...

    js地区三级联动

    在JavaScript编程中，"地区三级联动"是一种常见的前端交互功能，尤其在填写地址或选择服务范围时非常实用。它指的是用户在选择省份时，下方的市、区/县选项会根据所选省份自动更新，形成一个联动的效果。这种功能...

Magicbox
Global site tag (gtag.js) - Google Analytics