javascript - 删除更改 jquery 函数上的特定值

Question

背景

我有 3 个字段保存某些数据。它们都有共同的类名:polo-basket--labels。

<div class="row">
    <div class="columns small-8">
        <label for="basket__label">basket  labels in the dog</label>
        <select class="fancy-dropdown" name="selected_basket__labels" id="polo-basket--labels" multiple="true" data-placeholder="Choose..." style="width: 400px">
            {{#each referencePanelbaskets}}
            <option {{#ifArrayContains ../polosWithoutUncertainString this}}selected{{/ifArrayContains}} value="{{this}}">{{this}}</option>
            {{/each}}
        </select>
    </div>
</div>
<div class="row">
    <div class="columns small-6">
        <label for="basket__labels_on_parent_a">Parent A/label>
        <select class="fancy-dropdown polo-parent-basket--labels" name="basket__labels_on_parent_a[]" multiple="true" data-placeholder="Choose..." style="width: 400px">
            {{#each referencePanelbaskets}}
            <option {{#ifArrayContains ../parentAsWithInsteadOfUncertain this}}selected{{/ifArrayContains}} value="{{this}}">{{this}}</option>
            {{/each}}
        </select>
    </div>
    <div class="columns small-6">
        <label for="basket__labels_on_parent_b">Parent B</label>
        <select class="fancy-dropdown polo-parent-basket--labels" name="basket__labels_on_parent_b[]" multiple="true" data-placeholder="Choose..." style="width: 400px">
            {{#each referencePanelbaskets}}
            <option {{#ifArrayContains ../parentBsWithInsteadOfUncertain this}}selected{{/ifArrayContains}} value="{{this}}">{{this}}</option>
            {{/each}}
        </select>
    </div>

每当我从第一个 div 中删除带有

的值时

class="fancy-dropdown"

它会触发下面发布的jquery，并删除“Parent A”和“Parent B”字段中的所有值。“Parent”和“Parent B”是带有

的值

class="fancy-dropdown polo-parent-basket--labels"

$('#polo-basket--labels').change(function () {
  var options = _.map($(this).val(), function (basket__label) {
    return {
      id: basket__label,
      text: basket__label
    }
  })
  $('.polo-parent-basket--labels').val(null).select2('destroy').empty().select2({data: options})
})

问题

但是我想改变这种行为。所以每当我从

中删除值(value)时

class="fancy-dropdown"

我只想从 ParentA 和 ParentB div 中删除该值，而不是删除所有内容。

我对 jquery 很陌生，而且我从未使用过 .hbs，所以我喜欢任何输入。

到目前为止我尝试了什么

我认为 Jquery 函数中的最后一行

$('.polo-parent-basket--labels').val(null).select2('destroy').empty().select2({data: options})

是导致所有值爆炸的原因，所以我想也许我可以在这里传递数据，但没有运气。

Answer 1

您希望使用 DOM 遍历来使选择器更加具体，如下所示:

  // go up to the nearest row element, then grab the next sibling row
  let parentA = $(this).closest('tr').next('tr');
  // ... and the one after that
  let parentB = parentA.next('tr');

  parentA.val(null).select2('destroy').empty().select2({data: options});
  parentB.val(null).select2('destroy').empty().select2({data: options});
})

有很多方法可以减少代码重复，但这让您知道从哪里开始。例如，您可以通过将三个相关行分组到一个容器中来显着简化事情。