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

您正在选择updateMember(member: Member): Observable<Member[]> { <---元素，将<select>传递给this.selectedOptions[0]

＆＃13;

.not()

＆＃13;

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

＆＃13;

Answer 2

this引用select代码的位置，因此您需要将其从select代码集合中排除。

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者在option上下文中选择this标记以排除。

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新但我认为最好禁用该选项而不是删除。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

忽略当前类jquery

3 个答案: