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

简介

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

（下载的附件中附有DEMO）

使用

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/