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阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
php模块memcache和memcached区别分析
2011/06/14 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
深入理解python try异常处理机制
2016/06/01 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
Java如何调用外部Exe程序
2015/07/04 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
工作证明格式及范本
2014/09/12 职场文书
小学信息技术教学反思
2016/02/16 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书