javascript - Bootstrap 多选下拉列表从 optgroup 中取消选择相同值的选项

Question

我使用了 bootstrap multiselect js。当我取消选择任何 optgroup 或选项时，将从下拉列表中取消选择相同值的选项。 我尝试过，但无法正常工作。

http://jsfiddle.net/c3mpjzte/24/

我的代码:

$('#MessageToUser').multiselect({
  enableFiltering: true,
  filterBehavior: 'text',
  buttonWidth: '100%',
  enableClickableOptGroups: true,
  enableCollapsibleOptGroups: true,
  nonSelectedText: 'Select User',
  //includeSelectAllOption: true,
  maxHeight: 300,
  templates: {
    button: '<span class="multiselect dropdown-toggle" data-toggle="dropdown">To User</span>'
  },
  onChange: function(option, checked) {
    debugger
    if (checked == false) {
      var a = [];

      if (Array.isArray(option) == true) {
        $.each(option, function(i, value) {
          a.push(option[i].val());
        })

        $.each(option, function(index, value) {
          $('#MessageToUser option:selected').each(function(i, obj) {
            if ($(this).val() == option[index].val()) {
              $(this).prop("selected", false);
            }
          });
        });

        $('#MessageToUser').multiselect('deselect', a);
      } else {
        $('#MessageToUser option:selected').each(function(i, obj) {
          if ($(this).val() == option.val()) {
            $(this).prop("selected", false);
          }
        });

        $('#MessageToUser').multiselect('deselect', [option.val()]);
      }

      //$("#MessageToUser").multiselect("refresh");
    }

    $("#MessageToUser").next().find("button.multiselect span.multiselect-selected-text").text("Selected To Users");
  }
});

Answer 1

您不能在 Bootstrap 多重选择中使用选项值。请查看this fiddle或下面的代码片段:

$(function(){
   $('#MessageToUser').multiselect({
    enableFiltering: true,
    filterBehavior: 'text',
    buttonWidth: '100%',
    enableClickableOptGroups: true,
    enableCollapsibleOptGroups: true,
    nonSelectedText: 'Select User',
    //includeSelectAllOption: true,
    maxHeight: 300,
    templates: {
        button: '<span class="multiselect dropdown-toggle" data-toggle="dropdown">To User</span>'
    },
    onChange: function (option, checked) {
        debugger  
  if (checked == false) {
            $.each(option, function (index, value) {
            var optionID = $(value).parent().attr("value");
                    $('#MessageToUser option[val1='+ $(this).attr("val1") +']').each(function (i, obj) {
                      
                     $("#MessageToUser").multiselect("deselect", $(this).val());
                 
                    });
                });
        }
      
         return false;
        
        
           
        $("#MessageToUser").next().find("button.multiselect span.multiselect-selected-text").text("Selected To Users");  
      
      
    }
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>


<select id="MessageToUser" multiple="multiple">
   <optgroup label="Admin" value="Admin" value="1">
      <option value="1-3" val1="3">Admin Admin</option>
      <option value="1-45" val1="45">Admin One</option>
   </optgroup>
   <optgroup label="Back Office" value="2">
      <option value="2-8" val1="8" >Backoffice Backoffice</option>
      <option value="2-42" val1="42">Karan Singh</option>
        <option value="2-45" val1="45">Admin One</option>
   </optgroup>
   <optgroup label="User" value="3" >
      <option value="3-7" val1="7" >User User</option>
      <option value="3-7" val1="7">User One</option>
      <option value="3-77" val1="77">user user</option>
        <option value="3-45" val1="45">Admin One</option>
   </optgroup>
   <optgroup label="Supervisor Supervisor Team" value="4">
      <option value="4-1" val1="1">Supervisor Supervisor</option>
      <option value="4-2" val1="2">Sanyami Vaidya</option>
      <option value="4-3" val1="3">Admin Admin</option>
        <option value="4-45" val1="45">Admin One</option>
   </optgroup>
   <optgroup label="Sanyami Vaidya Team" value="5">
      <option value="5-11" val1="11">User One</option>
      <option value="5-40" val1="40">Khyati Shah</option>
      <option value="5-42" val1="42">Karan Singh</option>
      <option value="5-46" val1="46">Super Super</option>
   </optgroup>

</select>