Javascript 使用站点上的多个选择更改基于optgroup标签的选择字段

我有一个带有optgroup的select字段。在该选择中选择一个值后，它将获取optgroup并对其进行调整，以便其旁边的另一个选择仅包含该optgroup的选项（两个选择都具有相同的optgroup标签）

我通过以下方式使其工作良好：

jQuery(function() {
  var properties;
  properties = $('#segment_conditions_attributes_0_property').html();
  return $('#segment_conditions_attributes_0_condition_type').change(function() {
    var condition, condition_properties;
    condition = $('#segment_conditions_attributes_0_condition_type :selected').parent().attr('label');
    condition_properties = $(properties).filter("optgroup[label='" + condition + "']").html();

    if (condition_properties) {
      return $('#segment_conditions_attributes_0_property').html(condition_properties);
    } else {
      return $('#segment_conditions_attributes_0_condition_type').empty();
    }
  });
});

现在，我遇到的问题是，我允许访问者在同一页面中添加更多这些选项（假设您正在创建一个调查程序，您可以通过单击“添加更多答案”来添加答案选项），而我无法找到一种方法，以便当我有多个选项时，我的代码可以理解此逻辑

当只有两次选择（第一次和第二次）时，它可以完美地工作，但是如果我决定让用户添加一个新的选择（从而创建两次选择），我的代码就无法工作

HTML：

<div class="segment-block">
    <select class="condition-type" name="segment[conditions_attributes][0][condition_type]" id="segment_conditions_attributes_0_condition_type">
        <optgroup label="User">
            <option selected="selected" value="is in plan">is in plan</option>
            <option value="is not in plan">is not in plan</option>
        </optgroup>
        <optgroup label="Events">
            <option value="has triggered event">has triggered event</option>
        </optgroup>
    </select>

    <select class="condition-property" name="segment[conditions_attributes][0][property]" id="segment_conditions_attributes_0_property">
        <optgroup label="User">
            <option value="1">ok</option>
            <option value="2">test plan</option>
            <option value="3">Standard</option>
            <option value="4">Test Plan</option>
            <option value="5">ok</option>
        </optgroup>
        <optgroup label="Events">
            <option value="succeeded">succeeded</option>
            <option value="failed">failed</option>
            <option value="refunded">refunded</option>
            <option value="customer.created">Customer created</option>
        </optgroup>
    </select>
</div>

正在计划中
这不在计划之内
已触发事件
好啊
测试计划
标准
测试计划
好啊
成功
失败
退还
客户创建

现在我想要的是，当我更改

条件类型

选择时，它会在

条件属性

中获得optgroup，同时考虑到一个页面上可能有多个段块

---

我如何调整和更改我的JS代码来实现这一点？

剧烈的变化，可能会使它成为一个全新的答案，但无论如何。同样的规则也适用：尽可能使用更通用的选择器而不是固定的ID，并尽量避免使用固定的DOM路径，以防结构发生变化

这就是说，这里有一个可扩展（可回收）版本的相同的东西。我在页面上抛出了多个select块单元，因此您可以看到它们实际工作

jQuery（函数（）{
$（“.segment block”）。每个（函数（）{
//要做的第一件事是存储第二个select的HTML内容。
var properties=$（this.find（“.condition property”）.html（）；
//然后将相应的optgroup设置为hidden。。。
切换条件（$（此））；
//现在，每次更改第一个选择时，都要切换optgroup
$（this）.find（“.condition type”）.on（“change”，function（））{
切换条件（$（this）.parents（“.segment块”）；
});
//无论是最初还是第一次选择的每次更改，都要执行此操作
功能切换条件（myEl）{
var condition=myEl.find（“：selected”）.parent（）.attr（“label”）；
var condition_properties=$（properties.filter（“optgroup[label='”+condition+']）html（）；
if（条件_属性）{
返回myEl.find（“.condition property”）.html（条件属性）；
}否则{
返回myEl.find（“.condition属性”）.empty（）；
}
}
});
});
。段块{
填充：10px；
边框：1px纯灰；
边缘底部：10px；
}

正在计划中
这不在计划之内
已触发事件
好啊
测试计划
标准
测试计划
好啊
成功
失败
退还
客户创建
正在计划中
这不在计划之内
已触发事件
好啊
测试计划
标准
测试计划
好啊
成功
失败
退还
客户创建
正在计划中
这不在计划之内
已触发事件
好啊
测试计划
标准
测试计划
好啊
成功
失败
退还
客户创建
正在计划中
这不在计划之内
已触发事件
好啊
测试计划
标准
测试计划
好啊
成功
失败
退还
客户创建
正在计划中
这不在计划之内
已触发事件
好啊
测试计划
标准
测试计划
好啊
成功
失败
退还
客户创建
正在计划中
这不在计划之内
已触发事件
好啊
测试计划
标准
测试计划
好啊
成功
失败
退还
客户创建
正在计划中
这不在计划之内
已触发事件
好啊
测试计划
标准
测试计划
好啊
成功
失败
退还
客户创建
剧烈的变化，可能会使它成为一个全新的答案，但无论如何。同样的规则也适用：尽可能使用更通用的选择器而不是固定的ID，并尽量避免使用固定的DOM路径，以防结构发生变化

这就是说，这里有一个可扩展（可回收）版本的相同的东西。我在页面上抛出了多个select块单元，因此您可以看到它们实际工作


jQuery（函数（）{
$（“.segment block”）。每个（函数（）{
//要做的第一件事是存储第二个select的HTML内容。
var properties=$（this.find（“.condition property”）.html（）；
//然后将相应的optgroup设置为hidden。。。
切换条件（$（此））；
//现在，每次更改第一个选择时，都要切换optgroup
$（this）.find（“.condition type”）.on（“change”，function（））{
切换条件（$（this）.parents（“.segment块”）；
});
//无论是最初还是第一次选择的每次更改，都要执行此操作
功能切换条件（myEl）{
var condition=myEl.find（“：selected”）.parent（）.attr（“label”）；
var condition_properties=$（properties）.filter（“optgroup[label='”+condition+']）.html