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 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
基于vue实现分页效果
Nov 06 Javascript
js实现左右两侧浮动广告
Jul 09 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
react结合bootstrap实现评论功能
May 30 Javascript
详解js中的几种常用设计模式
Jul 16 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
公司道歉信范文
2014/01/09 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
花木兰观后感
2015/06/10 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python