编程 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 相关文章推荐

jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码

Apr 27 Javascript

javascript中将Object转换为String函数代码 (json str)

Apr 29 Javascript

javascript实现随时变化着的背景颜色

Apr 02 Javascript

JavaScript判断undefined类型的正确方法

Jun 30 Javascript

JS绘制生成花瓣效果的方法

Aug 05 Javascript

js判断日期时间有效性的方法

Oct 24 Javascript

js仿微博动态栏功能

Feb 22 Javascript

ES6中参数的默认值语法介绍

May 03 Javascript

Vue中父组件向子组件通信的方法

Jul 11 Javascript

js图片轮播插件的封装

Jul 21 Javascript

vue移动UI框架滑动加载数据的方法

Mar 12 Javascript

vue解决使用$http获取数据时报错的问题

Oct 30 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下拉联动更具级联性!