javascript - 忽略当前类 jquery

Question

我有如下所示的选择框数组

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

每当我从任何选择框中选择一个选项时，该选项应该从除当前选择的选择框之外的其他选择框中删除。我的 js 片段在下面

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

});

但是这段代码也从当前类中删除了选项

Fiddle

Answer 1

您正在选择 <select>元素，通过 this.selectedOptions[0]至 .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>