如何在jQuery中定位外部$(this)

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

1. 以获取所有选定的值。
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>

$(this) select 页面上的元素。你只想为点击的那一个做这件事。出于这个原因,你应该非常小心 $(本) $(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');
  });
});

为什么不干脆禁用目标元素呢?您仍然可以看到所选内容,用户无法再次单击它。

这个解决方案有点凌乱,但它是有效的

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

.each 在这里

.on('change') 使用 .selector 班级。一旦你有了那个数组,检查刚才选择的元素有多少个实例。如果该数字>1,则该选择已以不同的方式进行 .选择器 元素。

工作笔: 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('');
    }  
  });

});