JavaScript实现三级级联特效


Posted in Javascript onNovember 05, 2017

本文实例为大家分享了js实现三级级联特效的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

<!-- 实现效果:选择省会出现相应的县下拉框,同时市的下拉框改变-->
    <script type="application/javascript">  


//二维数组存放市的信息
      var shi =[["丽水市","杭州市"],["新乡","郑州"]]; 
    
//三维数组存放县的信息   


 var xianes = [[["云和","景宁"],["桐庐","原阳"]],[["卫辉","下乡"],["中原","二七"]]];
      //所选的省值



var proIndex = 0;
      function sgc(){
        //获得所选择的省的下拉框值



 var pro = document.getElementById("sheng");
       //获得市的下拉框 



var cit = document.getElementById("shi");
       //将省的value与市的一维数组下标所对应 



proIndex = pro.value-1;



//清空市下拉框中原有的值
        cit.options.length = 1;
        //通过for循环往下拉框中添加市的信息
        for(var i = 0;i < shi[proIndex].length;i++){
          var op = document.createElement("option");
          var citName = document.createTextNode(shi[proIndex][i]);
          op.value = i;
          op.appendChild(citName);
          cit.appendChild(op);          
        }      
      }


 //市的值改变后改变县的值
      function sic(){
        var are = document.getElementById("xian");
        var cit = document.getElementById("shi");
        are.options.length = 1;



//通过proIndex获得所选的省的值作为县的数组的一维数组下标,通过cit.value作为县数组的二维数组下标,遍历获得数组值
        for(var i = 0;i<xianes[proIndex][cit.value].length;i++){
          var op = document.createElement("option");
          var areName = document.createTextNode(xianes[proIndex][cit.value][i]);
          op.value = i;
          op.appendChild(areName);
          are.appendChild(op);
        }
      }
    </script>


//onchange():控件的value值改变后调用方法
    <select id = "sheng" onchange = "sgc();">
      <option>----省份---</option>
      <option value = "1">浙江省</option>
      <option value = "2">河南省</option>
    </select>
    <select id = "shi" onchange="sic();">
      <option>---市区---</option>
    </select>
    <select id = "xian" >
      <option>---县区---</option>
    </select>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
js实现导航吸顶效果
Feb 24 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 #Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 #Javascript
JavaScript中立即执行函数实例详解
Nov 04 #Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 #Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 #Javascript
简述Angular 5 快速入门
Nov 04 #Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php错误日志简单配置方法
2016/07/11 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
javascript取消文本选定的实现代码
2010/11/14 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
小程序实现留言板
2018/11/02 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
微信小程序事件流原理解析
2019/11/27 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
python自动化报告的输出用例详解
2018/05/30 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
TensorFlow实现Logistic回归
2018/09/07 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
python微信公众号开发简单流程实现
2020/03/09 Python
numpy库reshape用法详解
2020/04/19 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Pandas之缺失数据的实现
2021/01/06 Python
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
python flappy bird小游戏分步实现流程
2022/02/15 Python