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中onclick(this)用法介绍
Apr 19 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
vue如何判断dom的class
Apr 26 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
JavaScript实现表单验证功能
Dec 09 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
JS随机排序数组实现方法分析
2017/10/11 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
浅析Python中的for 循环
2016/06/09 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python使用代理ip访问网站的实例
2018/05/07 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Python hashlib模块实例使用详解
2019/12/24 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
上海期货面试题
2014/01/31 面试题
教师自我评价范例
2013/09/24 职场文书
市场营销工作计划书
2014/09/15 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
导游词之桂林山水
2019/09/20 职场文书