插件 jQuery.chained 中文API文档
插件 jQuery.chained 中文API文档
源码 & 下载
- Github地址：https://github.com/tuupola/jquery_chained
- 源码下载： -
- 效果演示： -
适用场景
插件特点
链接是链接选择的简单插件。它适用于jQuery和Zepto。您可以选择两个不同的版本。使用jquery.chained.js，如果你不希望使外部查询设置孩子选择的内容。此版本使用数据attirbutes来决定内容。
对于更复杂的场景，维护数据属性会变得很麻烦。此外，如果您想要对数据库使用进行查询jquery.chained.remote.js。此版本生成外部AJAX查询，并使用返回的JSON构建子选择。
基本用法
子选择链接到父选择。所有选择必须具有id属性。子选择选项必须具有与父选择的选项值匹配的类名。当用户在父选择中选择某些内容时，将更新子选择中的选项。具有匹配的类名与父项当前选定选项的选项将保持可见。其他人都隐藏了。
首先，您必须在代码中包含jQuery或Zepto和Chained：
<script src="jquery.js"></script>
<script src="jquery.chained.js"></script>
如果您使用的是Zepto，则还必须包含可选的选择器模块。
<script src="zepto.js"></script>
<script src="zepto-selector.js"></script>
<script src="jquery.chained.js"></script>
然后我们假设您有以下HTML代码：
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" data-chained="bmw">3 series</option>
<option value="series-5" data-chained="bmw">5 series</option>
<option value="series-6" data-chained="bmw">6 series</option>
<option value="a3" data-chained="audi">A3</option>
<option value="a4" data-chained="audi">A4</option>
<option value="a5" data-chained="audi">A5</option>
</select>
您现在可以将系列链接到标记。有两种不同的方法可以做到这一点。如果您喜欢更喜欢英文或更短的版本，请选择自己。我更喜欢较短的版本。
$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark");
链接到多个Parent
一个孩子可以有两个父母。子链接到多个父项的可用选项取决于父项选择值中的一个或两个。要使子选择取决于父母双方的值，请使用数据属性first+second。
这是第四个选择的代码。请注意柴油发动机如何仅适用于BMW 3和5系轿车。这是通过使用类名series-3+sedan和series-5+sedan。
<select id="engine" name="engine">
<option value="">--</option>
<option value="25-petrol" data-chained="series-3 a3 a4">2.5 petrol</option>
<option value="30-petrol" data-chained="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
<option value="30-diesel" data-chained="series-3+sedan series-5+sedan a5">3.0 diesel</option>
</select>
$("#series").chained("#mark");
$("#model").chained("#series");
$("#engine").chained("#series, #model");
用于AJAX
使用远程版本使用远程版本与上面解释的类似。首先包括jQuery或Zepto和Chained的远程版本：
<script src="jquery.js"></script>
<script src="jquery.chained.remote.js"></script>
在HTML中，您只需要为第一个选择提供选项标签。其他选择的内容将由AJAX请求返回的JSON构建。当父选择的值发生更改时，将完成AJAX请求。
<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
</select>
<select id="model" name="model">
<option value="">--</option>
</select>
<select id="engine" name="engine">
<option value="">--</option>
</select>
在代码中，您必须使用remoteChained()方法。第二个参数是发送AJAX请求的URL。
$("#series").remoteChained({
parents : "#mark",
url : "/api/series"
});
$("#model").remoteChained({
parents : "#series",
url : "/api/models"
});
$("#engine").remoteChained({
parents : "#series, #model",
url : "/api/engines"
});
当在父选择上触发更改事件时，将GET请求发送到给定的URL。此请求包括查询字符串中父级的名称和值。例如，当用户在第一次选择中选择BMW时，会发出以下请求：
GET http://example.com/api/series?mark=bmw
JSON数据格式
默认情况下，链接可以处理两种不同格式的JSON响应。包含键+值对的对象很容易生成。但是，JavaScript中对象的属性没有顺序。根据浏览器选择选项可能会出现在不同的顺序。
{
"" : "--",
"series-1" : "1 series",
"series-3" : "3 series",
"series-5" : "5 series",
"series-6" : "6 series",
"series-7" : "7 series",
"selected" : "series-6"
}
如果要将服务器端上的条目排序为特定顺序，请使用对象数组。
[
{ "" : "--" },
{ "series-1" : "1 series" },
{ "series-3" : "3 series" },
{ "series-5" : "5 series" },
{ "series-6" : "6 series" },
{ "series-7" : "7 series" },
{ "selected" : "series-6" }
]
如果您正在访问第三方数据源并且无法控制数据结构，则可以使用该data功能。它应该变异并以上述格式之一返回json数据。下面的示例显示了如何将命名空间数据变为插件所理解的格式。
{
"data": [
{ "" : "--" },
{ "series-1" : "1 series" },
{ "series-3" : "3 series" },
{ "series-5" : "5 series" },
{ "series-6" : "6 series" },
{ "series-7" : "7 series" },
{ "selected" : "series-6" }
]
}
$("#series").remoteChained({
parents : "#mark",
url : "/api/series",
data: function (json) {
return json.data;
}
});
