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

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

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: http://www.jb51.net/article/102040.htm

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

赞 (0)

相关推荐

  • javascript Select标记中options操作方法集合

    javascript操作Select标记中options集合 先来看看options集合的这几个方法: options.add(option)方法向集合里添加一项option对象: options.remove(index)方法移除options集合中的指定项: options(index)或options.item(index)可以通过索引获取options集合的指定项: javascript代码如下: var selectTag = null; //select标记 var OPTONLEN

  • js querySelector和getElementById通过id获取元素的区别

    这是sina同事xiaoniu发现的,如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E5

  • Js操作Select大全(取值、设置选中等等)

    jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[tex

  • JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解

    在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部

  • javascript操作select参考代码

    1.判断select选项中 是否存在Value="paraValue"的Item         function jsSelectIsExitItem(objSelect, objItemValue) {             var isExit = false;             for (var i = 0; i < objSelect.options.length; i++) {                 if (objSelect.options[i].

  • js 操作select和option常用代码整理

    1.获取选中select的value和text,html代码如下: 复制代码 代码如下: <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </selec

  • js select多选列表传值代码

    js select /*移除左边选中的列表项到右边*/ function fMoveSelectedOptionsLeftToRight(oLeft,oRight) { if(!(oLeft&&oRight)) { return; } if(!hasOptions(oLeft)) { return; } if(oLeft.selectedIndex==-1) { oLeft.selectedIndex=0; } for(var i=0;i0) { oSelect.remove(ops.le

  • js 触发select onchange事件代码

    select 或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,如果在js中给select或text赋值,则无法触发onchang事件, 例如,在页面加载完成以后,需要触发一个onChange事件,在js中用document.getElementById("province").value="湖北";直接给select或text赋值是不行的,要想实现手动触发onchange事件,需要在js给select赋值后,加入下面的

  • javascript之querySelector和querySelectorAll使用介绍

    一开始很多人都会拿jquery的选择器来跟这两个api做对比(我也是),比较异同本来没事,但却使一些同学对这两个api在浏览器中的实现产生了误解,特别是再dom element上调用此api时. 下面是我的jsFiddle示例,我就以此展开说明: js代码: (function(global) { global.doc = document; global.body = doc.getElementsByTagName('body')[0]; global.$ = function(id) {

  • jquery及原生js获取select下拉框选中的值示例

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 复制代码 代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select> 一:javas

随机推荐