具有相同选项的多个选择框 - 需要唯一选择 [英] multiple select boxes with same options - require unique selection

问题描述

我有一个有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来做到这一点，但我不确定如何要求唯一选择跨越不同的选择框。

$ b $ $ p $ $（'select'）。on（'change'，function（）{
//如果选项是选中，在所有其他选择框中禁用它，如果取消选择，则在所有其他选择框中重新启用该选项。
}）


感谢您的帮助！

解决方案

strong>

流量必须自上而下。这也意味着用户何时改变下拉值，所有下一个下拉的值必须被重置。说完这一点，这里是我的代码片段。

HandleDropdowns（$（ '＃BOX1'））; //首先调用这个函数来处理下拉菜单，通过传递第一个下拉菜单作为参数$（'select'）。on（'change'，function（）{HandleDropdowns（$（this））; //处理任何改变的所有下拉菜单事件}};函数HandleDropdowns（element）{var $ element = element; var value = $ element.val（）; 。$ element.nextAll（）VAL（）; //使用nextAll可以重置下列所有下拉列表$ element.nextAll（）。attr（'disabled'，'disabled'）; //禁用以下所有下拉菜单。 HandleOptions（）; //调用这个函数来切换选项if（value.length）{$ element.next（）。removeAttr（'disabled'）; //只有当此下拉列表有一些选择时，才能启用下一个下拉菜单。 }}函数HandleOptions（）{$（'option'）。removeAttr（'disabled'）; //将所有选项重置为可用$ .each（$（'select'），function（）{//从上到下循环并逐个禁用选项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 =>选择< / option> < option value =cat> Cat< / option> < option value =dog> Dog< / option> < option value =bird> Bird< / option>< / select>< select id =box2> < option value =>选择< / option> < option value =cat> Cat< / option> < option value =dog> Dog< / option> < option value =bird> Bird< / option>< / select>< select id =box3> < option value =>选择< / 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（）{//循环所有剩余的select元素var subValue = $（this）.val（）; if（subValue === value）{/ /（如果值相同）$（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 =>选择< / option> < option value =cat> Cat< / option> < option value =dog> Dog< / option> < option value =bird> Bird< / option>< / select>< select id =box2> < option value =>选择< / option> < option value =cat> Cat< / option> < option value =dog> Dog< / option> < option value =bird> Bird< / option>< / select>< select id =box3> < option value =>选择< / option> < option value =cat> Cat< / option> < option value =dog> Dog< / option> < option value =bird> Bird< / option>< / select>  

I have a form with 3 select boxes. Each select box has the same options. I want to require that you have to select a different option for each select box. For example, let's say the options are "cat", "dog" and "bird". If someone selects "bird" in the first select box, I want to disable or hide that option from the other two boxes. If they change their selection, then "bird" will be enabled or unhidden again.

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

I assume I can do this with jquery onchange but I'm not sure how to require the unique selection across different select boxes.

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

Thanks for your help!

解决方案

1) Top To Bottom Priority Approach

The flow must be top to bottom. This also means when ever the user changes the dropdown value all the next dropdown's which come after it must be reset. Having said this, here is my code snippet.

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) All Select Box With Same Priority Approach

In this approach when ever the user selects a value we check if any other dropdown has the same value, If yes reset it else do nothing. Below is a working sample.

$('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>

这篇关于具有相同选项的多个选择框 - 需要唯一选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！