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 面向对象编程(2) 定义类
May 18 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 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中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
自动化系在校本科生求职信
2013/10/23 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
竞聘演讲稿
2014/04/24 职场文书
公司员工管理制度
2015/08/04 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android