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 相关文章推荐
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
jstree的简单实例
Dec 01 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
vue-ajax小封装实例
Sep 18 Javascript
vue组件name的作用小结
May 23 Javascript
Javascript获取某个月的天数
May 30 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
PHP 简单数组排序实现代码
2009/08/05 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
竞选卫生委员演讲稿
2014/04/28 职场文书
交通处罚决定书
2015/06/24 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL