如何根据多选下拉列表中先前选择的下拉值禁用下拉选项？答案

【问题标题】：how to disable dropdown options based on the previously selected dropdown values in multi select dropdown?如何根据多选下拉列表中先前选择的下拉值禁用下拉选项？
【发布时间】：2015-09-23 06:35:57
【问题描述】：

我有两个多选下拉菜单。这两个下拉菜单将具有相同的选项集（如星期一、星期二、星期三）。现在我想进行验证，在这些选项的一个下拉列表中选择某些选项（这些是多选下拉列表。），那么相同的选项不应该可以从另一个下拉列表中选择。（意味着那些应该被禁用。）在这里对于多选，我正在使用一个 UI js 插件multi select dropdown javascript plugin。

<label for="shift_day_list_1">Day</label> 
      <input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>

<label for="shift_day_list_2">Day</label> 
      <input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>

这是我的 js 代码：

$(document).ready(function() {
   $('#day_list_1').SumoSelect({
      placeholder: 'Select Days',
      csvDispCount: 3 
      });

      $('#day_list_2').SumoSelect({
      placeholder: 'Select Days',
      csvDispCount: 3 
      });
 });

如何实现？请帮帮我？

【问题讨论】：

我看到相同的 ID ，ID 应该一直是唯一的
你的 js/jquery 代码在哪里？
试试这个 document.getElementById("day_list_2").options[document.getElementById("day_list_1").selectedIndex].disabled = true;
并且选择标签的 ID 应该不同！ :)

标签： javascript jquery html drop-down-menu sumoselect.js

【解决方案1】：

我已经为你创建了一个完整的评论 sn-p：

// when all the elements in the DOM are loaded
document.addEventListener('DOMContentLoaded', function() {  
  // get both lists and their HTMLOptionElement nodes
  var list1 = document.getElementById('day_list_1'),
      list2 = document.getElementById('day_list_2'),
      options1 = list1.querySelectorAll('option'),
      options2 = list2.querySelectorAll('option');
  
  // add event handlers when the lists are changed to call the update function
  $(list1).change(update).SumoSelect();
  $(list2).change(update).SumoSelect();

  function update(e) {
    // when the lists are changed, loop through their HTMLOptionElement nodes
    var other = (list1 === this) ? list2 : list1;    
    for (var i = 0; i < options1.length; i++) {
      // options of list1 should be disabled if selected in list2 and vice-versa
      this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i);
    }
  }
});

.form-control {
  width: 130px;
  height: 130px;
}

<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script>

<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
  <option value="Sunday">Sunday</option>
  <option value="Monday">Monday</option>
  <option value="Tuesday">Tuesday</option>
  <option value="Wednesday">Wednesday</option>
  <option value="Thursday">Thursday</option>
  <option value="Friday">Friday</option>
  <option value="Saturday">Saturday</option>
</select>

<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]">
  <option value="Sunday">Sunday</option>
  <option value="Monday">Monday</option>
  <option value="Tuesday">Tuesday</option>
  <option value="Wednesday">Wednesday</option>
  <option value="Thursday">Thursday</option>
  <option value="Friday">Friday</option>
  <option value="Saturday">Saturday</option>
</select>

【讨论】：

我为此使用了一个插件。 hemantnegi.github.io/jquery.sumoselect。好的用户界面。我如何使用这些插件选项来实现这一点？我无法弄清楚。
他们有类似.disableItem(index)的方法，阅读文档
知道如何使用 n 数量的 SumoSelect 框吗？ @Buzinas

【解决方案2】：

你可以使用普通的 js 来实现。在 onChange 事件的 day_list_‌1 上使用以下代码。

document.getElementById("day_list_2").options[document.getElementById("day_list_‌1").selectedIndex].disabled = true;

【讨论】：

我为此使用了一个插件。 hemantnegi.github.io/jquery.sumoselect .for 好的用户界面。我如何使用这些插件选项来实现这一点？我无法弄清楚。
似乎 sumoselect 有类似的选项 $('select.SlectBox')[0].sumo.disableItem(2);

【解决方案3】：

看看这个 jsfiddle Click here for jsfiddle example

$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled');

但在此之前，您需要将更改事件添加到第一个选择/下拉列表。我希望你能从这里拿走..

【讨论】：

小提琴链接未打开。
更新了正确的链接
我为此使用了一个插件。 hemantnegi.github.io/jquery.sumoselect 。好的用户界面。我如何使用这些插件选项来实现这一点？我无法弄清楚。

【解决方案4】：

试试这个：

$('#day_list_1').on('change', function() {
  $('#day_list_2').find('option').removeProp('disabled');
  var val = $(this).val() || [];
  val.forEach(function(item) {
    $('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled');
  });
});
$('#day_list_2').on('change', function() {
  $('#day_list_1').find('option').removeProp('disabled');
  var val = $(this).val() || [];
  val.forEach(function(item) {
    $('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="day_list_1">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
  <option value="Sunday">Sunday</option>
  <option value="Monday">Monday</option>
  <option value="Tuesday">Tuesday</option>
  <option value="Wednesday">Wednesday</option>
  <option value="Thursday">Thursday</option>
  <option value="Friday">Friday</option>
  <option value="Saturday">Saturday</option>
</select>


<label for="day_list_2">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
  <option value="Sunday">Sunday</option>
  <option value="Monday">Monday</option>
  <option value="Tuesday">Tuesday</option>
  <option value="Wednesday">Wednesday</option>
  <option value="Thursday">Thursday</option>
  <option value="Friday">Friday</option>
  <option value="Saturday">Saturday</option>
</select>

【讨论】：

我为此使用了一个插件。 hemantnegi.github.io/jquery.sumoselect .for 好的用户界面。我如何使用这些插件选项来实现这一点？我无法弄清楚。

【解决方案5】：

首先您必须更改“day_list_1”的 id，因为根据 HTML 标准，任何标签的整个 HTML 中只有一个 id。

所以你应该这样做：

第一个：

<select class="form-control" id="day_list_1" multiple="multiple" 
name="shift[day_list_1][]">

下一个：

<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">

验证代码：

function validate(){

  var error = false;
  var selected_val_1 = []; 
  $('#day_list_1 :selected').each(function(i, selected){ 
    selected_val_1[i] = $(selected).text(); 
  });

  var selected_val_2 = []; 
  $('#day_list_2 :selected').each(function(i, selected){ 
    selected_val_2[i] = $(selected).text(); 
  });

  $.each(selected_val_1, function( index, value ) {
              if($.inArray(value, selected_val_2) != -1){
                    error = true;
              }
  });

  $.each(selected_val_2, function( index, value ) {
              if($.inArray(value, selected_val_1) != -1){
                    error = true;
              }
  });

  if(error == true){
     return true;
  }else{
    return false;
  }

}

希望对你有帮助。如果您对此逻辑有任何疑问，可以回复我。

谢谢。

【讨论】：

我为此使用了一个插件。 hemantnegi.github.io/jquery.sumoselect .for 好的用户界面。我如何使用这些插件选项来实现这一点？我无法弄清楚。
感谢约翰，提供有关您的代码的信息。您可以使用它来获取价值，而不是我之前的代码： $('.select1 option:selected').each(function(){ //your selected values });通过这个，您可以获得选定值的数组，然后您可以根据您的条件验证这些值并禁用该值。

【解决方案6】：

它也适用于 3 个下拉菜单

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

  <script type="text/javascript">

    $(window).load(function(){
        var $dropdown1 = $("select[name='project_manager[]']");
        var $dropdown2 = $("select[name='test_engineer[]']");
        var $dropdown3 = $("select[name='viewer[]']");

        $dropdown1.change(function() {
            $dropdown2.empty().append($dropdown1.find('option').clone());
            $dropdown3.empty().append($dropdown2.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $(selectedItem).each(function(v,selectedItem) {
                $dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
                $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
             });
            }
        });

        $dropdown2.change(function() {
            $dropdown3.empty().append($dropdown2.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $(selectedItem).each(function(v,selectedItem) {
                    $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
                });
            }
        });
});
</script>
</head>
<body>
  <select id="project_manager" name="project_manager[]" multiple="multiple">
  <option></option>
  <option  id="option" value="1">Test 1</option>
  <option id="option" value="2">Test 2</option>
  <option  id="option" value="3">Test 3</option>
</select>

<select id="test_engineer" name="test_engineer[]" multiple="multiple" >
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "vrLr9wyg"
      }], "*")
    }
  </script>
</body>
</html>

【讨论】：