Ignore current jquery class

Question

I have a select box array as below

<select name="select" class="alert_type">
    <option value=1>option1 </option>
    <option value=2>option2 </option>
    <option value=3>option3 </option>
    <option value=4>option4 </option>
</select>
<select name="select" class="alert_type">
    <option value=1>option1 </option>
    <option value=2>option2 </option>
    <option value=3>option3 </option>
    <option value=4>option4 </option>
</select>
<select name="select" class="alert_type">
    <option value=1>option1 </option>
    <option value=2>option2 </option>
    <option value=3>option3 </option>
    <option value=4>option4 </option>
</select>

Whenever I select one option from any selection box, this option should be removed from a selection field other than the currently selected selectbox. My js snippet below

$('.alert_type').change(function() {
  var selected_value = $(this).val();
  $(".alert_type option[value='" + selected_value + "']").not(this).remove();

});

But this code also removes the parameter from the current class

Fiddle

Answer 1

You select an item <select>, go this.selectedOptions[0]to.not()

 $('.alert_type').change(function() {
   var selected_value = $(this).val();
   $(".alert_type option[value='" 
     + selected_value + "']")
   .not(this.selectedOptions[0]).remove();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select name="select" class="alert_type">
  <option></option>
  <option value="1">option1 </option>
  <option value="1">option1 </option>
  <option value="2">option2 </option>
  <option value="3">option3 </option>
  <option value="4">option4 </option>
</select>
<select name="select" class="alert_type">
  <option></option>
  <option value="1">option1 </option>
  <option value="1">option1 </option>
  <option value="2">option2 </option>
  <option value="3">option3 </option>
  <option value="4">option4 </option>
</select>
<select name="select" class="alert_type">
  <option></option>
  <option value="1">option1 </option>
  <option value="1">option1 </option>
  <option value="2">option2 </option>
  <option value="3">option3 </option>
  <option value="4">option4 </option>
</select>

Run codeHide result

Answer 2

Where thisrefers to a tag select, so you need to exclude it from the tag collection select.

$('.alert_type').change(function() { 
  var selected_value=$(this).val();
  $(".alert_type").not(this).find("option[value='" + selected_value + "']").remove();
}); 

$('.alert_type').change(function() {
  var selected_value = $(this).val();
  $(".alert_type").not(this).find("option[value='" + selected_value + "']").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>

Run codeHide result

---

Or select tags optionin the context thisto exclude.

$('.alert_type').change(function() { 
  var selected_value=$(this).val();
  $(".alert_type option[value='" + selected_value + "']").not($('option', this)).remove();
}); 

$('.alert_type').change(function() {
  var selected_value = $(this).val();
  $(".alert_type option[value='" + selected_value + "']").not($('option', this)).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>

Run codeHide result

---

: , .

$('.alert_type').change(function() {
  var selected_value = $(this).val();
  $(".alert_type option").prop('disabled', false).filter("[value='" + selected_value + "']").not($('option', this)).prop('disabled', true);
});

$('.alert_type').change(function() {
  var selected_value = $(this).val();
  $(".alert_type option").prop('disabled', false).filter("[value='" + selected_value + "']").not($('option', this)).prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>

Hide result

Answer 3

$('.alert_type').change(function() {
  var selected_value = $(this).val();
  $(this).siblings(".alert_type").find("option[value='" + selected_value + "']").remove();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>
<select name="select" class="alert_type">
  <option value=1>option1</option>
  <option value=2>option2</option>
  <option value=3>option3</option>
  <option value=4>option4</option>
</select>

Hide result

• .siblings() this
• Find the parameter with the specified value, then hide it