js select下拉联动 更具级联性!


Posted in Javascript onApril 17, 2020

之前有过记录,select下拉联动 (Bootstrap、JQuery插件之cxselect)区别在这个级联性更强。

js select下拉联动 更具级联性!

HTML源码:

<!DOCTYPE html> 
<head> 
 <meta charset="utf-8"> 
 <title></title> 
</head> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
<script type="text/javascript" src="USjs.js"></script> 
<body> 
 
<div class="container"> 
 <table> 
 <tr> 
  <td>厂商:</td> 
  <td><select id="selF"><option>请选择</option></select></td> 
  <td>品牌:</td> 
  <td><select id="selT"><option>请选择</option></select></td> 
  <td>型号:</td> 
  <td><select id="selC"><option>请选择</option></select></td> 
  <td><input type="button" value="查询" id="Button1" class="btn" /></td> 
 </tr> 
 </table> 
</div> 
 
</body> 
</html>

JS(USjs.js)源码: 在转载的基础上做了修改,特别是源数据JSON格式。

$(function(){ 
 
 function objInit(obj){ 
 return $(obj).html('<option>请选择</option>'); 
 } 
 
 $.getJSON('data.json', function(json) { 
 var arrData = json; 
 $.each(arrData,function(pF,pV){ 
  $('#selF').append('<option value="'+pF+'">'+pV.n+'</option>'); 
 }); 
 $('#selF').change(function(){ 
  objInit('#selT'); 
  objInit('#selC'); 
  $.each(arrData,function(pF,pS){ 
  if($('#selF option:selected').attr('value')==pF){ 
   $.each(pS.s,function(pT,pC){ 
   $('#selT').append('<option value="'+pT+'">'+pC.n+'</option>'); 
   }); 
   $('#selT').change(function(){ 
   objInit('#selC'); 
   $.each(pS.s,function(pT,pC){ 
    if($('#selT option:selected').attr('value')==pT){ 
    $.each(pC.s,function(ii,vv){ 
     $('#selC').append('<option value="'+ii+'">'+vv.n+'</option>'); 
    }) 
    } 
   }) 
   }); 
  } 
  }) 
 }); 
 }); //getJSON 
});

JSON(data.json)文件

[ 
 { 
 "n":"厂商1", 
 "s":[ 
  { 
  "n":"品牌一", 
  "s":[{"n":"型号1-1-1"},{"n":"型号1-1-2"}] 
  }, 
  { 
  "n":"品牌二", 
  "s":[{"n":"型号1-2-1"},{"n":"型号1-2-2"}] 
  } 
  ] 
 }, 
 { 
 "n":"厂商2", 
 "s":[ 
  { 
  "n":"品牌一", 
  "s":[{"n":"型号2-1-1"},{"n":"型号2-1-2"}] 
  }, 
  { 
  "n":"品牌二", 
  "s":[{"n":"型号2-2-1"},{"n":"型号2-2-2"}] 
  } 
  ] 
 }, 
 { 
 "n":"厂商3", 
 "s":[ 
  { 
  "n":"品牌一", 
  "s":[{"n":"型号3-1-1"},{"n":"型号3-1-2"}] 
  }, 
  { 
  "n":"品牌二", 
  "s":[{"n":"型号3-2-1"},{"n":"型号3-2-2"}] 
  } 
  ] 
 } 
]

Find more from: //3water.com/article/102040.htm

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

Javascript 相关文章推荐
ExtJS的FieldSet的column列布局
Nov 20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
javascript实现留言板功能
Feb 08 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 #Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 #Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 #Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 #Javascript
深入理解Javascript中的valueOf与toString
Jan 04 #Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 #Javascript
js实现定时进度条完成后切换图片
Jan 04 #Javascript
You might like
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
easyui validatebox验证
2016/04/29 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
基于vue+canvas的excel-like组件实例详解
2017/11/28 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
js实现数字滚动特效
2019/12/16 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
python爬虫常用的模块分析
2014/08/29 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
python实现用户管理系统
2018/01/10 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
编辑找工作求职信分享
2014/01/03 职场文书
军神教学反思
2014/02/04 职场文书
春节联欢晚会主持词范文
2014/03/24 职场文书
春节联欢会策划方案
2014/05/16 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
同学聚会感言一句话
2015/07/30 职场文书
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js