忽略当前 class jquery

Question

我有如下 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>
<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 从任何 select 框中选择一个选项时，该选项应该从除当前 selected select 框之外的其他 select 框中删除.我的 js 片段在下面

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

});

但是此代码也从当前 class 中删除了该选项

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>

Answer 2

其中 this 指的是 select 标签，因此您需要将其从 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>

或 select option 要排除的 this 上下文中的标签。

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

更新：但我认为禁用该选项比删除该选项更好。

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

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>

您可以将 .siblings() 与 this 上下文一起使用
找到具有所述值的选项然后隐藏它们

忽略当前 class jquery

Ignore current class jquery

javascript

jquery

jquery-selectors