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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
javascript 面向对象的JavaScript类
2010/05/04 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
使用js画图之饼图
2015/01/12 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
python按键按住不放持续响应的实例代码
2019/07/17 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
初中生物教学反思
2014/01/10 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
在校实习生求职信
2014/06/18 职场文书
学校献爱心活动总结
2014/07/08 职场文书
六年级学生期末评语
2014/12/26 职场文书
保送生自荐信范文
2015/03/26 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
合作协议书格式范本
2016/03/21 职场文书
Golang中异常处理机制详解
2021/06/08 Golang
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python