第29款插件:第24款插件：jquery.chained.js多级联动插件

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



兼容浏览器：IE6+/Firefox/Google Chrome
官方链接：暂无
JS下载： http://ijquery.360sites.cn/js/jquery.chained.js
预览： http://ijquery.360sites.cn/demo/chained
打包下载： http://ijquery.360sites.cn/demo/chained/chained.zip
参数说明： 无
JS引用代码：

1. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.4.2.min.js"></script>
   
2. <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery.chained.js"></script>
   
3. <script type="text/javascript">
   
4.         $(function () {
   
5.                 $("#series").chained("#mark");  //注：#series是二级的id,#mark是一级的id
   
6.         });
   
7. </script>

复制代码

HTML代码：
说明：只要二级的option设置的class的属性是一级的value的值就可以了！
如一级<select id=" series "><option  value="bmw" >BMW</option></selected>，
二级<option value="series-1"  class="bmw" >

1. <form>
   
2.         <select id="mark">
   
3.                 <option value="">--</option>
   
4.                 <option value="bmw">BMW</option>
   
5.                 <option value="audi">Audi</option>
   
6.         </select>
   
7.         <select id="series">
   
8.                 <option value="">--</option>
   
9.                 
   
10.                 <option value="series-1" class="bmw">1 series</option>
    
11.                 <option value="series-3" class="bmw">3 series</option>
    
12.                 <option value="series-5" class="bmw">5 series</option>
    
13.                 <option value="series-6" class="bmw">6 series</option>
    
14.                 <option value="series-7" class="bmw">7 series</option>
    
15.                 
    
16.                 <option value="a1" class="audi">A1</option>
    
17.                 <option value="a3" class="audi">A3</option>
    
18.                 <option value="s3" class="audi">S3</option>
    
19.                 <option value="a4" class="audi">A4</option>
    
20.                 <option value="s4" class="audi">S4</option>
    
21.                 <option value="a5" class="audi">A5</option>
    
22.                 <option value="s5" class="audi">S5</option>
    
23.                 <option value="a6" class="audi">A6</option>
    
24.                 <option value="s6" class="audi">S6</option>
    
25.                 <option value="rs6" class="audi">RS6</option>
    
26.                 <option value="a8" class="audi">A8</option>
    
27.         </select>
    
28. </form>

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=29