引导多选下拉菜单从 optgroup 中取消选择相同的值选项

Posted 2023-03-11

【中文标题】引导多选下拉菜单从 optgroup 中取消选择相同的值选项

【英文标题】：Bootstrap multiselect dropdown deselect same value option from optgroup

【发布时间】：2017-12-05 08:35:59

【问题描述】：

我使用了引导多选 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");
  
);

【参考方案1】：

您不能在引导多选中使用选项值。请查看this fiddle或下面的代码sn-p：

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