javascript - 2 个相同的选择列表，但不允许在其中选择相同的值

Question

这里有我的任务的 javascript 代码:https://jsfiddle.net/gckkvLcv/4/

<select id="s1">
  <option selected="selected">USD</option>
  <option>KZT</option>
  <option>EUR</option>
</select>
<select id="s2">
  <option>USD</option>
  <option selected="selected">KZT</option>
  <option>EUR</option>
</select>

1. 我需要将其转换为 jQuery 版本。
2. 在文档加载时，我可以在选择列表中看到相同的值。我需要禁用这种行为。

Answer 1

由于您使用的是 jQuery，因此可以简单地完成如下操作:

$('.tracked_select').on('change', function() {
    //Get selected options
    var selected_options = $('.tracked_select').map(function(){
      return this.value
    }).get();

    //Disable the already selected options and enable others
    $('.tracked_select option').each(function(index) {
      $(this).prop('disabled', $.inArray($(this).val(), selected_options) != -1);
    });
});

希望这有帮助。

trigger_chane();

$('.tracked_select').on('change', function() {
  trigger_chane();
});

function trigger_chane(){
  var selected_options = $('.tracked_select').map(function(){
    return this.value
  }).get();

  $('.tracked_select option').each(function(index) {
    $(this).prop('disabled', $.inArray($(this).val(), selected_options) != -1);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="tracked_select">
  <option selected="selected">USD</option>
  <option>KZT</option>
  <option>EUR</option>
</select>
<select class="tracked_select">
  <option>USD</option>
  <option selected="selected">KZT</option>
  <option>EUR</option>
</select>