Question

我尝试使用$('.selector').on('change', function(){})，然后在其中添加each。我想要的是将当前.selector作为目标，如果当前项目已被选中，则将其设为空，以便您可以选择其他项目； DOM中有多个<select class='selector'>元素。请在下面查看我的代码。

$(document).ready(function(){
  
  $('.selector').on('change', function(){
    var currentSelect = $(this).val();
    
    if(currentSelect == ''){
      $('.selector').each(function(){
        if(currentSelect == $(this).val()){
          alert("Sorry, you cannot select that item again.");
          $(this).val('');
        }  
      });
    }
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<select class="selector">
  <option></option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Banana">Banana</option>
  <option value="Watermelon">Watermelon</option>
</select>
<br><br>

<select class="selector">
  <option></option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Banana">Banana</option>
  <option value="Watermelon">Watermelon</option>
</select>
<br><br>

<select class="selector">
  <option></option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Banana">Banana</option>
  <option value="Watermelon">Watermelon</option>
</select>
<br><br>

<select class="selector">
  <option></option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Banana">Banana</option>
  <option value="Watermelon">Watermelon</option>
</select>

Answer 1

如果我正确理解了您的问题，那么这就是答案。通过使用$(this)，您可以将所有更改应用于页面上的所有select元素。您只想为被单击的对象执行此操作。因此，在使用$(this)时应格外小心，而应使用$(event.target)。在此处阅读有关差异的更多信息： Difference between $(this) and event.target?

$(document).ready(function(){

  $('.selector').on('change', function(e){
    var currentSelect = $(e.target).val(); // if you need to pass/submit the value somewhere later
    $(e.target).attr('disabled', 'disabled');
  });
});

为什么不简单地禁用目标元素？您仍然可以看到选择的内容，而用户无法再次单击它。

Answer 2

这里没有真正的理由来遍历.each。

您可以做的是.on('change')使用.selector类创建一个元素所有值的数组。然后，一旦有了该数组，请检查刚刚选择的元素有多少个实例。如果该数字> 1，则已经在另一个.selector元素中进行了选择。

工作笔： https://codepen.io/anon/pen/WLvzMM

$(document).ready(function(){

  $('.selector').on('change', function(){

    // Put the value of all elements with the class of `.selector` into an array
    var all = $.map($('.selector'), function (el) { return el.value; });

    // Get value of the change that was just made
    var currentSelect = $(this).val();

    // Get the number of occurences of the value that was just selected
    var occurences = $.grep(all, function (elem) {
      return elem === currentSelect;
    }).length;

    // If there is more than one occurence (the one that was just selected), then prevent the selection.
    if(occurences > 1){
      alert("Sorry, you cannot select that item again.");
      $(this).val('');
    }  
  });

});

Answer 3

在这里，每个更改事件都需要2个循环。

获取所有选定的值。
隐藏所有从其他<select>元素中选择的所有值。

就这么简单。

$(document).ready(function(){
  
  var selected = []; // Global scope array.
  
  $('.selector').on('change', function(){
    var currentSelect = $(this).val();
    var selected = [];  // Array reset
    
    $('.selector').each(function(){
      var val = $(this).val();
      if(val!=""){
        selected.push($(this).val()); // Array fill
      }
    });
    
    console.log(selected);
    
    $('.selector option').each(function(){
      if($.inArray($(this).val(),selected)!=-1){ // If not in array: hide
        $(this).hide();
      }else{
        $(this).show();
      }
    });
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<select class="selector">
  <option></option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Banana">Banana</option>
  <option value="Watermelon">Watermelon</option>
</select>
<br><br>

<select class="selector">
  <option></option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Banana">Banana</option>
  <option value="Watermelon">Watermelon</option>
</select>
<br><br>

<select class="selector">
  <option></option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Banana">Banana</option>
  <option value="Watermelon">Watermelon</option>
</select>
<br><br>

<select class="selector">
  <option></option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
  <option value="Banana">Banana</option>
  <option value="Watermelon">Watermelon</option>
</select>

Answer 4

此解决方案有点混乱，但可以使用

$(document).ready(function(){
  $(".selector").on("change", function(){
    var currentSelect = $(this).val();
    $(this).siblings().on("change", function(event){
      if(currentSelect == $(this).val()){
        $(this).val('')
        alert("Sorry, you cannot select that item again.");
      }  
    });
  });
});

如何在jQuery中定位$（this）外

4 个答案: