建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery多级联动插件jquery.chained.js

来源:易助科技网浏览量:10收藏

简介


Chained 是一个简单易用的轻量级 jQuery 多级联动插件,使用它可快速创建多级联动的下拉列表。它通过在 Select 中设置 class 样式名来关联上级列表,下拉列表数据来源多样性,可以从本地 js 加载,或者使用 AJAX 从服务器端异步获取 JSON 数据。更重要的是它完美支持多种浏览器,没有兼容性问题。

(下载的附件中附有DEMO)


JQuery多级联动插件jquery.chained.js-示例图



使用


1.  引入 jquery.js 和 jquery.chained.js 文件


2.  HTML


说明:只要二级的option设置的class的属性是一级的value的值就可以了!

如一级<select id="series"><option value="bmw">BMW</option></selected>,

二级<option value="series-1" class="bmw">


<form>
  <select id="mark">
    <option value="">--</option>
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </select>
  
  <select id="series">
    <option value="">--</option>
    <option value="series-1">1 series</option>
    <option value="series-3">3 series</option>
    <option value="series-5">5 series</option>
    <option value="series-6">6 series</option>
    <option value="series-7">7 series</option>
    <option value="a1">A1</option>
    <option value="a3">A3</option>
    <option value="s3">S3</option>
    <option value="a4">A4</option>
    <option value="s4">S4</option>
    <option value="a5">A5</option>
    <option value="s5">S5</option>
    <option value="a6">A6</option>
    <option value="s6">S6</option>
    <option value="rs6">RS6</option>
    <option value="a8">A8</option>
  </select>
</form>


3.  调用


<script type="text/javascript">
  $(function () {
    $("#series").chained("#mark");
    //注:#series是二级的id,#mark是一级的id
  });
</script>



相关链接


GitHub 地址  :https://github.com/kingctan/jquery_chained

官网地址 :  https://www.appelsiini.net/projects/chained/