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）从上到下优先级方法

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

在这种方法中，当用户选择一个值时，我们检查是否有任何其他下拉列表具有相同的值，如果是，则重置它否则不执行任何操作。以下是工作样本。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

3 个答案: