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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
提高Web性能的前端优化技巧总结
Feb 27 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue 组件高级用法实例详解
2018/04/11 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
详解Flask前后端分离项目案例
2020/07/24 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
法律顾问服务方案
2014/05/15 职场文书
公安学专业求职信
2014/07/27 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
实习单位指导教师评语
2014/12/30 职场文书
早会开场白台词大全
2015/06/01 职场文书
安全伴我行主题班会
2015/08/13 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
Python中文纠错的简单实现
2021/07/07 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android