如何根据先前 selected 的多 select 下拉列表中的下拉值禁用下拉选项？

Question

我有两个多 select 下拉菜单。这两个下拉菜单将具有相同的选项集（如星期一、星期二、星期三）。现在我想在这些 select 的一个下拉菜单中验证某些选项（这些是多个 select 下拉菜单。），然后 select 不应该使用相同的选项另一个下拉菜单。（意味着那些应该被禁用。）这里对于 multi select 我正在使用一个 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 
      });
 });

如何实现？请帮帮我？

Answer 1

看看这个 jsfiddle Click here for jsfiddle example

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

但在此之前，您需要将更改事件添加到第一个select/dropdownlist。我希望你能从这里开始..

Answer 2

您可以使用普通的 js 在 onChange 事件的 day_list_‌ 1 上实现 this.Use 以下代码。

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

Answer 3

我为您创建了完整的评论片段：

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

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

Answer 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;
  }

}

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

谢谢。

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

如何根据先前 selected 的多 select 下拉列表中的下拉值禁用下拉选项？

how to disable dropdown options based on the previously selected dropdown values in multi select dropdown?

javascript

jquery

html

drop-down-menu

sumoselect.js