Question

如何根据另一个列表中的选择显示/隐藏列表中的选项？

这是我所拥有的：

<div data-repeater-item class="row">
    <select class="subcategory">
        <option value="1">Subcategory 1</option>
        <option value="2">Subcategory 2</option>
        <option value="3">Subcategory 3</option>
    </select>
    <select class="tag_id">
        <option value="1" data-dynamic="1">Tag 1</option>
        <option value="2" data-dynamic="1">Tag 2</option>
        <option value="3" data-dynamic="1">Tag 3</option>
        <option value="4" data-dynamic="2">Tag 4</option>
        <option value="5" data-dynamic="2">Tag 5</option>
        <option value="6" data-dynamic="3">Tag 6</option>
    </select>
</div>
<div data-repeater-item class="row">
    <select class="subcategory">
        <option value="1">Subcategory 1</option>
        <option value="2">Subcategory 2</option>
        <option value="3">Subcategory 3</option>
    </select>
    <select class="tag_id">
        <option value="1" data-dynamic="1">Tag 1</option>
        <option value="2" data-dynamic="1">Tag 2</option>
        <option value="3" data-dynamic="1">Tag 3</option>
        <option value="4" data-dynamic="2">Tag 4</option>
        <option value="5" data-dynamic="2">Tag 5</option>
        <option value="6" data-dynamic="3">Tag 6</option>
    </select>
</div>

我的JS看起来像这样：

    var tag_id = $('.tag_id option');
    $('.subcategory').change(function () {
        tag_id.hide();
        var op = $(this).closest('.subcategory').val();
        tag_id.closest('[data-dynamic="' + op + '"]').show();
    });

我目前有2个问题： 1.如果我在一个列表subcategory列表中进行选择，它会同时更改两行tag_id中的选项，但是我需要它才能只对我所在的行进行更改正在更改子类别。 2.可以添加/删除行，但是当我添加新行时，我可以选择一个subcategory，但是它对tag_id没有任何影响

请您帮忙，我在jQuery / js方面经验不足

Answer 1

tag_id的两个options元素中有select个类，.tag_id具有subcategory。取而代之的是所选closest的同级对象。同样，请使用filter代替$(this).closest('.subcategory').val();。另外，不需要$(this).val()，您可以直接使用$('.subcategory').change(function() { const associatedTag = $(this).siblings('select.tag_id'); associatedTag.children().hide(); const selectedSubCategory = $(this).val(); associatedTag.children().filter('[data-dynamic="' + selectedSubCategory + '"]').show(); });来获取选定的值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-repeater-item class="row">
  <select class="subcategory">
    <option value="1">Subcategory 1</option>
    <option value="2">Subcategory 2</option>
    <option value="3">Subcategory 3</option>
  </select>
  <select class="tag_id">
    <option value="1" data-dynamic="1">Tag 1</option>
    <option value="2" data-dynamic="1">Tag 2</option>
    <option value="3" data-dynamic="1">Tag 3</option>
    <option value="4" data-dynamic="2">Tag 4</option>
    <option value="5" data-dynamic="2">Tag 5</option>
    <option value="6" data-dynamic="3">Tag 6</option>
  </select>
</div>
<div data-repeater-item class="row">
  <select class="subcategory">
    <option value="1">Subcategory 1</option>
    <option value="2">Subcategory 2</option>
    <option value="3">Subcategory 3</option>
  </select>
  <select class="tag_id">
    <option value="1" data-dynamic="1">Tag 1</option>
    <option value="2" data-dynamic="1">Tag 2</option>
    <option value="3" data-dynamic="1">Tag 3</option>
    <option value="4" data-dynamic="2">Tag 4</option>
    <option value="5" data-dynamic="2">Tag 5</option>
    <option value="6" data-dynamic="3">Tag 6</option>
  </select>
</div>

"lastName":"DÃ¼sedau"

Answer 2

在Generall中，要实现的目标在IE11和Safari中是不可能的。他们阻止设置选项以使其不显示。

如果选项可见/可用，则应将选项属性设置为禁用并将其删除。在选项中使用css而不是jquery。

select option:disabled {
  display:none;
}

如果要从选择中删除它们，则必须从html中删除它们。请参阅此处以获取参考CSS - Hide Options From Select Menu on iPhone & Safari

更改列表中的选项会因在另一个列表中所做的选择而无效

2 个答案: