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();
    }
  });
});

现在我遇到的问题是，我允许访问者在同一页面中添加更多这些选项（假设您正在创建调查程序，并且您可以通过点击添加答案选项＆＃34;添加更多答案＆＃34;）我无法找到方法，以便我的代码可以在我有几个时理解这个逻辑。

当它只有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>

根据具有多个选择的optgroup标签更改选择字段

1 个答案: