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 相关文章推荐
Javascript 页面模板化很多人没有使用过的方法
Jun 05 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
小程序云开发实战小结
Oct 25 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
javascript实现简易聊天室
Jul 12 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
php自定义apk安装包实例
2014/10/20 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
Python深入学习之对象的属性
2014/08/31 Python
python实现简单温度转换的方法
2015/03/13 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
jupyter安装小结
2016/03/13 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
英语故事演讲稿
2014/04/29 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
小学课改工作总结
2015/08/13 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python