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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
解析js如何获取css样式
Dec 11 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
基于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
Home Coffee Roasting
2021/03/03 咖啡文化
做一个有下拉功能的留言版
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP实现图片自动清理的方法
2015/07/08 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
解决python 输出是省略号的问题
2018/04/19 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python自动化办公操作PPT的实现
2021/02/05 Python
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
老师的检讨书
2014/02/23 职场文书
安全生产承诺书范文
2014/05/22 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
安全生产标语
2014/06/06 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
Java 多态分析
2022/04/26 Java/Android