README

Chained是一个简单的链式选择插件。它与jQuery和Zepto兼容。您可以选择两种不同的版本。如果您不想对外部查询进行设置子选择的内容，请使用jquery.chained.js。这个版本使用选择选项的类名来决定内容。

对于更复杂的场景，维护选项标签的类名可能会变得繁琐。如果您想针对数据库进行查询，请使用jquery.chained.remote.js。这个版本会执行外部AJAJ查询，并使用返回的JSON来构建子选择。

安装

您可以使用bower或npm进行安装。

>bower install chained
>npm install jquery-chained

简单用法

子选择与父选择链式连接。所有选择都必须有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" 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"); /* or $("#series").chainedTo("#mark");

连接到多个父选择

一个子选择可以有两个父选择。连接到多个父选择的子选择中的可用选项取决于一个或两个父选择的选中值。要使子选择依赖于父选择的值，请使用类名如first\second。

以下是第四个选择的代码。注意柴油发动机只有在宝马3系列和5系列轿车中可用。这是通过使用类名series-3\sedan和series-5\sedan来实现的。

<select id="engine" name="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使用方法

有关如何使用JSON数据构建选择器的说明，请参阅项目主页。

许可

所有代码均许可在MIT许可证下。

变更日志

请参阅发行版。