Question

我正在为产品系列设计一些产品过滤器。过滤器是选择中的选项。现在，我试图实现当选择“全部”选项时，它会删除所有其他选定的选项。

这是代码

  <select class="coll-filter" id="select-1">
    <option value="" class="test">All</option>
    {% for tag in tags %}
    {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected class="test2">{{ tag }}</option>
    {% elsif collection.all_tags contains tag %}
    <option value="{{ tag | handle }}" class="test2">{{ tag }}</option>
    {% endif %}
    {% endfor %}
  </select>

还有JS

        $('#select-1').change(function() {
    if($(".test").is(':selected')){
       $('#select-1').find(".test2").remove(':selected');
    };
  });

通过此操作，它会删除第一个选项的选择，但不会删除第二个选项，因此似乎只在第一个选择的选项上触发。有任何想法我做错了吗？

Answer 1

我不确定您现有的代码是否也适用于第一个选项。因为更改事件发生在选择元素上，而不发生在选项上。

我已经为您的代码应用了一般性更改，现在您可以看到选择ALL时，所有其他未选中。

$(document).ready(function() {
  showResults();
});

function showResults() {
  var options = [];
  $.each($("#select-1 option:selected"), function() {
    options.push($(this).val());
  });
  alert("You have selected options - " + options.join(", "));
}

$('#select-1').change(function() {
  if ($('#select-1 option[value=all]').is(':selected')) {
    alert('i am here');
    //$('#select-1').find(".test2").remove(':selected');
    //$('select-1 option[value=all]').attr('selected','selected');
    $('#select-1').val('all');
  } else {
    showResults();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p> <i> Press control key (Ctrl) to select multiple values: </i> </p>
<select class="coll-filter" id="select-1" multiple="multiple" size="5">
  <option value="all" class="test" selected>All</option>
  <option value="1" class="test" selected> 1 </option>
  <option value="2" class="test3"> 2 </option>
  <option value="3" class="test4" selected> 3 </option>
</select>

Answer 2

也许您可以使用此

$('#select-1 option').change(function(){
   if($(".test").is(':selected')){
  $('#select-1').children...

Answer 3

您可以将All选项的值设置为“ -1”，并执行以下操作：

$('#select-1').change(function() {
if($(this).val()== "-1")
  $(this).find('option').not($('.test')).removeAttr("selected");
});

Online demo (jsFiddle)

用jQuery删除所选选项的问题

3 个答案: