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 相关文章推荐
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
Swiper自定义分页器使用详解
Dec 28 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
移动端手指操控左右滑动的菜单
Sep 08 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 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
php实现两个数组相加的方法
2015/02/17 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
详解vue中组件参数
2018/07/09 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python实现对字符串的加密解密方法示例
2017/04/29 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python实现随机漫步方法和原理
2019/06/10 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
python绘制封闭多边形教程
2020/02/18 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
党委书记岗位职责
2013/11/24 职场文书
事业单位辞职信范文
2014/01/19 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript