将多个选择框选项链接到单个选择

Question

我正在使用 jquery 插件 jquery.chained.js 的修改版本来根据选择框的另一个值过滤选择框选项和复选框。但是，现在我需要根据之前选择框的选项 2 来过滤选择框。

我有 3 个选择框。

1. 员工
2. 房间
3. 服务

和几个复选框或选择框

• 插件

上述插件取决于偏好，将其显示为复选框或下拉菜单

如果您更改 Staff，则现在的方式是 Services 和 Addons 选项将更改为员工可以访问的任何服务。但是我现在需要这样做，以便 Services 和 Addons 将根据 Staff 可以访问那些 Services 以及 Rooms 提供这些服务的内容进行设置。

有谁能帮我修改这个已经修改过的脚本以添加对多个选择框的支持？我想尝试保持它的通用性，因为我们可能也会使用这个链接到其他元素的脚本。

总结一下我正在寻找的是添加对房间选择框的支持，以进一步过滤服务和插件服务选项。

示例代码可见http://bit.ly/uzEDL2

编辑：checkboxradio() 用于 jquery Mobile，所以不用担心这些。

Answer 1

要让孩子选择取决于两个父母的值，请使用类名，如first\second。请注意，如果您有非常复杂的选择结构，维护这种类会变得很麻烦。因此，使用插件的远程版本可能会更容易。

示例取自 plugin documentation。在此示例中，柴油发动机仅适用于 BMW 3 和 5 系列轿车。这是通过使用类名series-3\sedan 和series-5\sedan 来实现的。

<select id="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>

<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>

<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>

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

请注意，您的 HTML 无效。单个数字不是有效的类名。类名必须以下划线字母[a–z]、下划线[_]或破折号[-]开头，然后是数字、字母、下划线和破折号。更好的解释可以参考：Allowed characters for CSS identifiers。