Jquery Chained Selects Plugin 多级联动下拉框插件
在这一章节里， 和大家分享一个基于 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
同样我先附上多级联动插件源码:
方法一、 内部使用
子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
|
|
如下就是子父级select的关系:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
|
需要激活子父级的关系, 有两种方式， 取决于个人喜好， 我更偏向于短的:
|
1
2
|
$(
"#series"
).chained(
"#mark"
);
/* 或者 $("#series").chainedTo("#mark"); */
|
来尝试下效果:
-- BMW Audi -- 3 series 5 series 6 series
多个 Select 标签
现在我们就再来添加一个 select， 如下就是新 select 和父select('#series')的关系:
|
1
2
3
4
5
6
7
|
|
这里把 medel 对应到 series:
|
1
2
|
$(
"#series"
).chained(
"#mark"
);
$(
"#model"
).chained(
"#series"
);
|
-- BMW Audi -- 3 series 5 series 6 series -- Sedan
对应多个父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
|
1
2
3
4
5
6
|
|
|
1
2
3
|
$(
"#series"
).chained(
"#mark"
);
$(
"#model"
).chained(
"#series"
);
$(
"#engine"
).chained(
"#series, #model"
);
|
-- BMW Audi -- -- --
方法二、 外部请求 ajax
方法二类似于方法一， 首先载入 jQuery 和 jquery.chained.remote.min.js
|
1
2
|
|
在 html， 你只要将 select 标签修改成如下所示, 你需要将第一个 select 的 option 填写完整， 剩余的 select 将在第一个 select 选择后被 ajax 返回的 json 内容所填写
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
|
在 JavaScript 中， 你需要使用方法 remoteChained()， 第二参数就是 ajax 请求的地址
|
1
2
3
|
$(
"#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:
|
1
|
GET http:
//www.sunzhenghua.com/sample/json.php?mark=bmw
|
所返回的 JSON 内容将包含子select中option的 valule 和内容， 如下:
|
1
2
3
4
5
6
7
8
|
{
""
:
"--"
,
"series-1"
:
"1 series"
,
"series-3"
:
"3 series"
,
"series-5"
:
"5 series"
,
"series-6"
:
"6 series"
,
"series-7"
:
"7 series"
}
|
-- BMW Audi -- -- --