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

 更新时间:2020年04月17日 16:45:09   作者:东成熙就  
这篇文章主要为大家详细介绍了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: //www.jb51.net/article/102040.htm

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

相关文章

  • js实现文字跟随鼠标移动而移动的方法

    js实现文字跟随鼠标移动而移动的方法

    这篇文章主要介绍了js实现文字跟随鼠标移动而移动的方法,实例分析了javascript处理鼠标事件及文字特效的技巧,需要的朋友可以参考下
    2015-02-02
  • 微信小程序实现文件、图片上传功能

    微信小程序实现文件、图片上传功能

    这篇文章主要为大家详细介绍了微信小程序实现文件、图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • JS简单获得节点元素的方法示例

    JS简单获得节点元素的方法示例

    这篇文章主要介绍了JS简单获得节点元素的方法,结合实例形式分析了javascript获取页面节点元素及修改元素属性相关操作技巧,需要的朋友可以参考下
    2018-02-02
  • bootstrap实现轮播图效果

    bootstrap实现轮播图效果

    这篇文章主要为大家详细介绍了bootstrap实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • JS使用setInterval计时器实现挑战10秒

    JS使用setInterval计时器实现挑战10秒

    这篇文章主要为大家详细介绍了JS使用setInterval计时器实现挑战10秒,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JavaScript用Number方法实现string转int

    JavaScript用Number方法实现string转int

    parseInt方法在format'00'开头的数字时会当作2进制转10进制,所以建议string转int最好用Number方法
    2014-05-05
  • 微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

    微信小程序清空输入框信息与实现屏幕往上滚动的示例代码

    这篇文章主要介绍了微信小程序清空输入框信息与实现屏幕往上滚动的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • webpack该如何打包(打包流程)

    webpack该如何打包(打包流程)

    这篇文章主要介绍了webpack该如何打包及打包流程,本文通过图文示例相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • setTimeout与setInterval的区别浅析

    setTimeout与setInterval的区别浅析

    这篇文章主要给大家介绍了关于setTimeout与setInterval区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • javascript实现3D变换的立体圆圈实例

    javascript实现3D变换的立体圆圈实例

    这篇文章主要介绍了javascript实现3D变换的立体圆圈效果,涉及javascript动态操作页面元素实现滚动与变色的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08

最新评论