具有相同选项的多个选择框 - 需要唯一的选择

Question

我有一个带有 3 个选择框的表单。每个选择框都有相同的选项。我想要求您必须为每个选择框选择不同的选项。例如，假设选项是“猫”、“狗”和“鸟”。如果有人在第一个选择框中选择“鸟”，我想从其他两个框中禁用或隐藏该选项。如果他们更改了他们的选择，那么“鸟”将再次启用或取消隐藏。

<select id="box1">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

<select id="box2">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

<select id="box3">
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>

我假设我可以用 jquery onchange 做到这一点，但我不确定如何要求跨不同选择框的唯一选择。

$('select').on('change', function() {
    // If option is selected, disable it in all other select boxes. If option is deselected, reenable it in all other select boxes.
})

谢谢你的帮助！

Answer 1

1) 从上到下优先的方法

该流程必须是从上到下。这也意味着当用户更改下拉值时，必须重置所有下一个下拉列表。话虽如此，这是我的代码片段。

HandleDropdowns($('#box1'));  //initially call this function to handle the dropdowns by passing the first dropdown as parameter
 
$('select').on('change', function() {
  HandleDropdowns($(this)); // handle all dropdowns on any change event.
});

function HandleDropdowns(element) {      
  var $element = element;
  var value = $element.val();

  $element.nextAll().val('');  //using nextAll lets reset all the following dropdowns
  $element.nextAll().attr('disabled', 'disabled'); //disable all the following dropdowns.
  HandleOptions(); // call this function to toggle the options 

  if (value.length) {
    $element.next().removeAttr('disabled'); // only if this dropdown has some selection enable the next dropdown.
  }
}

function HandleOptions() {
  $('option').removeAttr('disabled'); //reset all the options to be available
  $.each($('select'), function() { //loop from top to bottom and disable the options one by one.
    var value = $(this).val();
    if (value.length) {
      $(this).nextAll().find('option[value="' + value + '"]').attr('disabled', 'disabled');
    }
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

<select id="box2">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

<select id="box3">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

2）所有选择框具有相同的优先级方法

在这种方法中，当用户选择一个值时，我们检查是否有任何其他下拉列表具有相同的值，如果是，则重置它，否则什么都不做。下面是一个工作示例。

$('select').on('change', function() {
  HandleDropdowns($(this));
});

function HandleDropdowns(element) {
  var $element = element;
  var value = $element.val();
  
  $.each($('select').not($element), function() { //loop all remaining select elements
    var subValue = $(this).val();
    if (subValue === value) { // if value is same reset
      $(this).val('');
      console.log('resetting ' + $(this).attr('id')); // demo purpose
    }
  });  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

<select id="box2">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>

<select id="box3">
  <option value="">Select</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
</select>