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 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
JS合并两个数组的3种方法详解
Oct 24 Javascript
封装 axios+promise通用请求函数操作
Aug 11 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python聊天程序实例代码分享
2013/11/18 Python
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
百丽国际旗下购物网站:优购
2017/02/28 全球购物
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
学校节能减排方案
2014/06/13 职场文书
励志演讲稿300字
2014/08/21 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS