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 相关文章推荐
用Juery网页选项卡实现代码
Jun 13 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue 封装 Adminlte3组件的实现
2020/03/18 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
python编写的最短路径算法
2015/03/25 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
深入浅析Python中的迭代器
2019/06/04 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
python读取ini配置文件过程示范
2019/12/23 Python
TFRecord格式存储数据与队列读取实例
2020/01/21 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
国贸专业求职信
2014/06/28 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
爱国主义影片观后感
2015/06/18 职场文书
中职班主任培训心得体会
2016/01/07 职场文书