js实现省市级联效果分享


Posted in Javascript onAugust 10, 2017

本文实例为大家分享了js实现省市级联效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script type="text/javascript">
    var shengArr =new Array();
    shengArr["广东"]=["广州","深圳","珠海","汕头","韶关"] ;
    shengArr["湖南"]=["长沙","张家界","株洲","怀化","常德"] ;
    shengArr["湖北"]=["武汉","荆州","宜昌","黄冈","仙桃"] ;
    shengArr["安徽"]=["合肥","黄山"] ;
    shengArr["河南"]=["郑州","信阳","洛阳"] ;

    function getSheng(){
      var s =document.getElementById("sheng");

      for(var v in shengArr){
        s.add(new Option(v,v),null);
      }
    }
    function getCity(){
      var s =document.getElementById("sheng");
      var c =document.getElementById("city");
      var v=s.value;
      c.options.length =0;

      for(var i in shengArr[v]){ 
        c.add(new Option(shengArr[v][i],shengArr[v][i]),null);
      }
    }
  </script>

  <!--页面加载时获取 省名-->
  <body onload="getSheng()"> 

    <!-- 改变省时匹配该省的城市名-->
    省:<select id="sheng" onchange="getCity()"> 
      <option>--请选择</option>
    </select>
    市:<select id="city"></select>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
vue el-table实现自定义表头
Dec 11 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 #Javascript
jquery对table做排序操作的实例演示
Aug 10 #jQuery
基于JavaScript实现飘落星星特效
Aug 10 #Javascript
提高Node.js性能的应用技巧分享
Aug 10 #Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 #Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 #Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 #Javascript
You might like
一周学会PHP(视频)Http下载
2006/12/12 PHP
MySQL相关说明
2007/01/15 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
一道python走迷宫算法题
2018/01/22 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
普师专业个人自荐信范文
2013/11/26 职场文书
学校运动会报道稿
2014/09/23 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
保险公司增员口号
2015/12/25 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python