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

时间：2015-09-23 06:35:58

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

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

如何实现这个？请帮帮我？

6 个答案:

答案 0 :(得分：1)

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

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

答案 1 :(得分：0)

看看这个jsfiddle Click here for jsfiddle example 

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

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

答案 2 :(得分：0)

您可以使用普通的j来实现此目的。在onChange事件的day_list_ 1上使用以下代码。

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

答案 3 :(得分：0)

试试这个：

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

答案 4 :(得分：0)

首先，您必须更改“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;
  }

}

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

感谢。

答案 5 :(得分：0)

它也可以在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>
相关问题
最新问题