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

Question

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

<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) 自上而下的优先方法

流程必须从上到下。这也意味着当用户更改下拉列表值时，必须重置所有下一个下拉列表。说了这么多，这是我的代码sn-p。

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>

Answer 2

试试这个

$('select').on('change', function () {
  $("select").find("option").removeAttr("disabled");
  $("select").not(this).find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
});

Answer 3

您可以使用 onchange 监听器并同时评估结果。还添加一个重置按钮，因为一旦选择了三个，它就会变成瓶颈。

工作代码如下

function changeSelect(elements) {
  var values = {};
  elements.forEach(function(item){
    values[item.id] = item.value;
  });
  elements.forEach(function(item){
    for(var i = 0; i < item.children.length; i++) {
      for(ids in values) {
        if(item.id != ids && item.children[i].value == values[ids]) {
          item.children[i].style.display = 'none';
        }
      }
    }
  });
}

function resetSelection(elements) {
  elements.forEach(function(item){
    item.value = '';
    for(var i = 0; i < item.children.length; i++) {
      item.children[i].style.display = '';
    }
  });
}

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var boxArray = [box1, box2, box3];
boxArray.forEach(function(item){
  item.addEventListener('change', changeSelect.bind(undefined,boxArray));
});
document.getElementById('reset').addEventListener('click', resetSelection.bind(undefined,boxArray));

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

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

<select id="box3">
    <option value="">Select An Option</option>
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="bird">Bird</option>
</select>
<button id="reset">Reset</button>