How to target outside $(this) in jQuery

Question

I'm trying to use $('.selector').on('change', function(){}) then inside of it, I added each. What I want is to target the current .selector, if the current item is already selected then make it empty so you can select other item; there are multiple <select class='selector'> elements in the DOM. Please see my code below.

$(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>

Your code is running fine, but you aren't checking if the select is empty first. Once you do that, then compare if user selection = current selection. — Nathaniel Flick, Dec 12 '18 at 00:59
Hi @NathanielFlick . I added that check, please see the code update. — Blues Clues, Dec 12 '18 at 01:08
I think a pretty good answer here: https://stackoverflow.com/questions/33928605/several-select-box-duplicate-values-compare — Nathaniel Flick, Dec 12 '18 at 01:47

score 0 · Answer 1 · answered Dec 12 '18 at 01:34

If I understood your question correctly, this would be the answer. By using $(this), you are applying whatever change to all select elements on the page. You want to do it just for the one that was clicked. For that reason, you should be very careful with $(this) and use $(event.target) instead. Read more about the differences here: 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');
  });
});

Why not simply disable the target element? You can still see what was selected and the user cannot click it again.

Mark · Answer 2 · 2018-12-12T01:41:47.950

There isn't really a reason to loop through .each here.

What you can do, is .on('change') create an array of all values of elements with the .selector class. Then once you have that array, check how many instances there are of the element that was just selected. If that number > 1, then that selection has already been made in a different .selector element.

Working Pen: 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('');
    }  
  });

});

Louys Patrice Bessette · Accepted Answer · 2018-12-12T02:00:36.033

You need 2 loops at each change events here.

to get all selected values.
to hide all values already selected from the other <select> elements.

Simple as that.

$(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>

score 0 · Answer 4 · answered Dec 12 '18 at 01:38

This solution is a little bit messy, but it works

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

How to target outside $(this) in jQuery

4 Answers4