根据 optgroup 标签更改选择字段，并在站点上进行多项选择

Question

我有一个带有 optgroup 的选择字段。当在该选择中选择了一个值时，它会获取 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();
    }
  });
});

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

当它只有 2 个选择（第一个和第二个）时它工作得很好，但是如果我决定让用户添加一个新的（从而创建更多 2 个选择）我无法让我的代码工作。

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>

现在我想要的是，当我更改 condition-type 选择时，它会在 condition-property 中获取该 optgroup，同时考虑到一页上可以有多个段块。

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

Answer 1

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

也就是说，这是同一事物的可扩展（可回收）版本。我在页面上放置了多个选择块单元，因此您可以看到它们确实有效。

jQuery(function() {
  $(".segment-block").each(function() {
    // first thing to do, is store the HTML content of the second select.
    var properties = $(this).find(".condition-property").html();

    // then set the appropriate optgroup to hidden...
    toggleConditions($(this));
    
    // Now, every time the first select is changed, toggle the optgroup
    $(this).find(".condition-type").on("change", function() {
      toggleConditions($(this).parents(".segment-block"));
    });

    // Both initially and on each change of the first select, do this
    function toggleConditions(myEl) {
      var condition = myEl.find(":selected").parent().attr("label");
      var condition_properties = $(properties).filter("optgroup[label='" + condition + "']").html();
      if (condition_properties) {
        return myEl.find(".condition-property").html(condition_properties);
      } else {
        return myEl.find(".condition-property").empty();
      }
    }
  });


});

.segment-block {
  padding: 10px;
  border: 1px solid grey;
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="segment-block">
  <select class="condition-type" name="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="condition-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>
<div class="segment-block">
  <select class="condition-type" name="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="condition-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><div class="segment-block">
  <select class="condition-type" name="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="condition-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><div class="segment-block">
  <select class="condition-type" name="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="condition-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><div class="segment-block">
  <select class="condition-type" name="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="condition-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><div class="segment-block">
  <select class="condition-type" name="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="condition-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><div class="segment-block">
  <select class="condition-type" name="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="condition-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>