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写的实用看图工具实现代码
Jul 26 Javascript
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
jQuery技巧总结
Jan 01 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
javascript如何定义对象数组
Jun 07 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 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模板技术[转]
2007/01/04 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JS简单计算器实例
2015/01/20 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python下载微信公众号相关文章
2019/02/26 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
基于PyTorch中view的用法说明
2021/03/03 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
小学班主任工作总结2015
2015/04/07 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python