如果选择了选项，则将其他选择的等选项更改为空白

Question

我的页面上有很多<select>个下拉菜单。每个结构化完全相同：

<select class="position" name="position">
  <option value=""></option>
  <option value="1">1st</option>
  <option value="2">2nd</option>
  <option value="3">3rd</option>
  <option value="4">4th</option>
  <option value="5">5th</option>
</select>

当我在一个"1st"中选择<select>时，如何将当前设置为"1st"的其他任何内容重置为""？注意：我不想重置所有下拉列表，只重置那些特定的。

$(".position").on("change", function() {
  var position = $(this).find("option:selected").val();
  if (position == 1) {
    $(".position").each(function() {
      // What goes here?
    });
  }
});

N.B。：如果某人有更好的方式来表达我的问题标题，请随时编辑。

Answer 1

这样就可以了：

$('select').change(function() {
  var curr = this.value;
  $('select').not(this).each(function() {
    if (this.value == curr) this.value = '';
  })
})

＆＃13;

＆＃13;

$('select').change(function() {
  var curr = this.value;
  $('select').not(this).each(function() {
    if (this.value == curr) this.value = '';
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="position" name="position">
  <option value=""></option>
  <option value="1">1st</option>
  <option value="2">2nd</option>
  <option value="3">3rd</option>
  <option value="4">4th</option>
  <option value="5">5th</option>
</select>
<select class="position" name="position">
  <option value=""></option>
  <option value="1">1st</option>
  <option value="2">2nd</option>
  <option value="3">3rd</option>
  <option value="4">4th</option>
  <option value="5">5th</option>
</select>
<select class="position" name="position">
  <option value=""></option>
  <option value="1">1st</option>
  <option value="2">2nd</option>
  <option value="3">3rd</option>
  <option value="4">4th</option>
  <option value="5">5th</option>
</select>

＆＃13;

＆＃13;

＆＃13;

更新：如果您关注的只是1st选项，请使用此选项：

＆＃13;

＆＃13;

$('select').change(function() {
  $('select').not(this).each(function() {
    if (this.value == 1) this.value = '';
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="position" name="position">
  <option value=""></option>
  <option value="1">1st</option>
  <option value="2">2nd</option>
  <option value="3">3rd</option>
  <option value="4">4th</option>
  <option value="5">5th</option>
</select>
<select class="position" name="position">
  <option value=""></option>
  <option value="1">1st</option>
  <option value="2">2nd</option>
  <option value="3">3rd</option>
  <option value="4">4th</option>
  <option value="5">5th</option>
</select>
<select class="position" name="position">
  <option value=""></option>
  <option value="1">1st</option>
  <option value="2">2nd</option>
  <option value="3">3rd</option>
  <option value="4">4th</option>
  <option value="5">5th</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

    $(".position").on("change", function() {
      var active = $(this);
      var position = $(this).find("option:selected").val();

      if (position == 1) {
        $(".position").each(function() {
          if($(this).val()=='1' && $(this)!=active) 
               $(this).find('option').first().attr('selected','selected');
        });
      }
    });