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

Question

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

我有3个选择框。

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

和几个复选框或选择盒

• 附加组件

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

如果您更改Staff，那么Services和Addons选项将更改为员工有权访问的服务。然而，我现在需要做到这一点，以便Services和Addons将基于什么Staff有权访问那些Services以及什么Rooms提供这些服务。

是否有人能够帮助我修改这个已经修改的脚本来添加对多个选择框的支持？我想尽量保持它的通用性，因为我们可能也会使用此链接脚本来处理其他元素。

总结我正在寻找的是添加对Rooms选​​项框的支持以进一步过滤服务和AddonServices选项。

实施例的代码可以发现http://bit.ly/uzEDL2

编辑：checkboxradio（）是用于移动的jquery所以不用担心那些。

Answer 1

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

取自plugin documentation的示例。在这个例子中，柴油发动机仅适用于宝马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找到。