Jquery Chained Selects Plugin 多级联动下拉框插件

最新推荐文章于 2024-07-07 15:42:19 发布

涨姿势

最新推荐文章于 2024-07-07 15:42:19 发布

阅读量1k

点赞数

分类专栏：编程常见问题文章标签： jquery ajax 插件

编程常见问题专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在这一章节里，和大家分享一个基于 jQuery 的多级联动下拉框插件，同样也可以基于 ajax 来操作

该插件共有两个版本：

1、如果你不需要通过外部请求来完成对子select内容的筛选，可以使用 jquery.chained.min.js，该版本是基于 class 名来决定子select中option内容，另外如碰到 JavaScript 被禁用的话，依然可用，但是所有的内容都会被显示出来，丢失了筛选功能

2、如果几个 select 含有较多的 option，那么 class 名就会变得非常繁复累赘，这样我们就可以使用 jquery.chained.remote.min.js - 基于外部请求 ajax 返回的 JSON 内容来填充子select中的option

同样我先附上多级联动插件源码:

jquery.chained.js.zip (1.45KB)

jquery.chained.remote.js.zip (2.28KB)

方法一、内部使用

子select中的 option 内容完全取决于父select中的 option 选择。所有的 select 标签都必须含有一个id属性。子select中所有的 option 都必须带有 class，该 class 名就是用来对应父select中 option 的值，这样当父select中的一个 option 被选中时，插件就会用该 option 的值来匹配子select中 option 的 class 名，匹配的将会被显示，其他则被隐藏

现在我们就来看下实例，首先加载 jQuery 和 jquery.chained.min.js

1 2	`<script src=` `"http://code.jquery.com/jquery.min.js"` `type=` `"text/javascript"` `charset=` `"utf-8"` `></script>` `<script src=` `"jquery.chained.min.js"` `type=` `"text/javascript"` `charset=` `"utf-8"` `></script>`

如下就是子父级select的关系:

 
        <select id= 
        "mark" 
        > <!-- 父select --> 
       
        <option value= 
        "" 
        > -- </option> 
       
        <option value= 
        "bmw" 
        >BMW</option> 
       
        <option value= 
        "audi" 
        >Audi</option> 
       
        </select> 
       
        <select id= 
        "series" 
        > <!-- 子select --> 
       
        <option value= 
        "" 
        > -- </option> 
       
        <option value= 
        "series-3" 
         class 
        = 
        "bmw" 
        >3 series</option> 
       
        <option value= 
        "series-5" 
         class 
        = 
        "bmw" 
        >5 series</option> 
       
        <option value= 
        "series-6" 
         class 
        = 
        "bmw" 
        >6 series</option> 
       
        <option value= 
        "a3" 
         class 
        = 
        "audi" 
        >A3</option> 
       
        <option value= 
        "a4" 
         class 
        = 
        "audi" 
        >A4</option> 
       
        <option value= 
        "a5" 
         class 
        = 
        "audi" 
        >A5</option> 
       
        </select>

需要激活子父级的关系, 有两种方式，取决于个人喜好，我更偏向于短的:

 
        $( 
        "#series" 
        ).chained( 
        "#mark" 
        );  
       
        /* 或者 $("#series").chainedTo("#mark"); */

来尝试下效果:

多个 Select 标签

现在我们就再来添加一个 select，如下就是新 select 和父select('#series')的关系:

 
        <select id= 
        "model" 
        > 
       
        <option value= 
        "" 
        >--</option>    
       
        <option value= 
        "coupe" 
         class 
        = 
        "series-3 series-6 a5" 
        >Coupe</option> 
       
        <option value= 
        "cabrio" 
         class 
        = 
        "series-3 series-6 a3 a5" 
        >Cabrio</option> 
       
        <option value= 
        "sedan" 
         class 
        = 
        "series-3 series-5 a3 a4" 
        >Sedan</option> 
       
        <option value= 
        "sportback" 
         class 
        = 
        "a3 a5" 
        >Sportback</option> 
       
        </select>

这里把 medel 对应到 series:

 
        $( 
        "#series" 
        ).chained( 
        "#mark" 
        );   
       
        $( 
        "#model" 
        ).chained( 
        "#series" 
        );

对应多个父select

一个子select可以对应二个父select，子select中的 option 显示与否将取决于一个或二个父select中 option 的选择，如果你想让子select中的 option 显示必须同时基于二个父select中 option 的选择，你可以这样写class名: 第一个/第二个

如下就是第四个select的代码，如果你想选择 '3.0 diesel'，那么你必须选择 BMW 3 series 或 5 series 的 Sedans，写法就是: series-3\sedan 和 series-5\sedan

 
        <select id= 
        "engine" 
        > 
       
        <option value= 
        "" 
        > -- </option>    
       
        <option value= 
        "25-petrol" 
         class 
        = 
        "series-3 a3 a4" 
        >2.5 petrol</option> 
       
        <option value= 
        "30-petrol" 
         class 
        = 
        "series-3 series-5 series-6 a3 a4 a5" 
        >3.0 petrol</option> 
       
        <option value= 
        "30-diesel" 
         class 
        = 
        "series-3\sedan series-5\sedan a5" 
        >3.0 diesel</option> 
       
        </select>

 
   
        $( 
        "#series" 
        ).chained( 
        "#mark" 
        );   
       
 
        $( 
        "#model" 
        ).chained( 
        "#series" 
        ); 
       
 
        $( 
        "#engine" 
        ).chained( 
        "#series, #model" 
        ); 
       
 
 

方法二、外部请求 ajax

方法二类似于方法一，首先载入 jQuery 和 jquery.chained.remote.min.js

1 2	`<script src=` `"http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"` `type=` `"text/javascript"` `charset=` `"utf-8"` `></script>` `<script src=` `"jquery.chained.remote.min.js"` `type=` `"text/javascript"` `charset=` `"utf-8"` `></script>`

在 html，你只要将 select 标签修改成如下所示, 你需要将第一个 select 的 option 填写完整，剩余的 select 将在第一个 select 选择后被 ajax 返回的 json 内容所填写

 
        <select id= 
        "mark" 
        > 
       
        <option value= 
        "" 
        >--</option> 
       
        <option value= 
        "bmw" 
        >BMW</option> 
       
        <option value= 
        "audi" 
        >Audi</option> 
       
        </select> 
       
        <select id= 
        "series" 
        > 
       
        <option value= 
        "" 
        >--</option> 
       
        </select> 
       
        <select id= 
        "model" 
        > 
       
        <option value= 
        "" 
        >--</option>    
       
        </select> 
       
        <select id= 
        "engine" 
        > 
       
        <option value= 
        "" 
        >--</option>    
       
        </select>

在 JavaScript 中，你需要使用方法 remoteChained()，第二参数就是 ajax 请求的地址

 
   
        $( 
        "#series" 
        ).remoteChained( 
        "#mark" 
        ,  
        "/sample/json.php" 
        ); 
       
 
        $( 
        "#model" 
        ).remoteChained( 
        "#series" 
        ,  
        "/sample/json.php" 
        ); 
       
 
        $( 
        "#engine" 
        ).remoteChained( 
        "#series, #model" 
        ,  
        "/sample/json.php" 
        ); 
       
 
 

每当父级select变动，就会触发 onchange 事件，向目标地址发送请求，参数为该 select 的 id 和值，比如说用户选择了 BMW，那么如下就是请求的 URL:

 
        GET http: 
        //www.sunzhenghua.com/sample/json.php?mark=bmw

所返回的 JSON 内容将包含子select中option的 valule 和内容，如下:

 
        { 
       
        "" 
        : 
        "--" 
        , 
       
        "series-1" 
        : 
        "1 series" 
        , 
       
        "series-3" 
        : 
        "3 series" 
        , 
       
        "series-5" 
        : 
        "5 series" 
        , 
       
        "series-6" 
        : 
        "6 series" 
        , 
       
        "series-7" 
        : 
        "7 series" 
       
        }

涨姿势

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery Chained Selects Plugin 多级联动下拉框插件

在这一章节里，和大家分享一个基于 jQuery 的多级联动下拉框插件，同样也可以基于 ajax 来操作该插件共有两个版本： 1、如果你不需要通过外部请求来完成对子select内容的筛选，可以使用 jquery.chained.min.js，该版本是基于 class 名来决定子select中option内容，另外如碰到 JavaScript 被禁用的
复制链接

扫一扫