编程 Javascript

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

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

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

- Author -

东成熙就

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用js得到网页中所有的div的id

Oct 19 Javascript

JavaScript中按位“异或”运算符使用介绍

Mar 14 Javascript

jQuery插件分享之分页插件jqPagination

Jun 06 Javascript

jQuery+CSS3实现四种应用广泛的导航条制作实例详解

Sep 17 Javascript

js中获取键盘事件的简单实现方法

Oct 10 Javascript

利用js定义一个导航条菜单

Mar 14 Javascript

Angular2实现自定义双向绑定属性

Mar 22 Javascript

angular ng-model 无法获取值的处理方法

Oct 02 Javascript

webpack dll打包重复问题优化的解决

Oct 10 Javascript

vue.js的简单自动求和计算实例

Nov 08 Javascript

微信小程序日历插件代码实例

Dec 04 Javascript

10分钟学会js处理json的常用方法

Dec 06 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

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

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