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 相关文章推荐
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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中addslashes函数与sql防注入
2014/11/17 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
JS画线(实例代码)
2013/11/20 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python定时执行指定函数的方法
2015/05/27 Python
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
python  logging日志打印过程解析
2019/10/22 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
新学期班主任寄语
2014/01/18 职场文书
好人好事演讲稿
2014/09/01 职场文书
2015年维修工作总结
2015/04/25 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android