Question

我有一个带有多个选择的选择下拉列表，我使用bootstrap-multiselect JavaScript插件来包含复选框选择。我的要求是想要一个按钮启用/禁用多个选择。默认情况下，当用户单击启用/禁用多个选择时，将使用onload多个选择删除多选属性。

<div class="row">
    <select name="select[]" multiple="multiple" id="select" class="multiselect">
        //options goes here
    </select>
    <select name="select2[]" multiple="multiple" id="select2" class="multiselect">
        //options goes here
    </select>
</div>
<button type="button" id="button">Enabel/Disable multiselection</button>

尝试删除多个属性，但不成功。

$("#button").click(function(){
    $("#select").removeAttr("multiple");
})

问题是插件没有任何内置功能符合我的要求。

对于具有类名的多个选择列表，它将创建多个按钮。例如：像附加的图像。（在图像中，'And'下拉列表不是muliselect下拉列表）

我在选择的选项顶部有一个选择（不是多选）框我会创建相关的多个选择下拉动态，需要多选

Answer 1

＆＃13;

var selectedMenu=[];

var defaultOptions=[
    {name:'And',value:'none'},
    {name:'Department',value:'Department'},
    {name:'Category',value:'Category'},
    {name:'ItemType',value:'ItemType'},
    {name:'Publisher',value:'Publisher'},
];


var arr_Category=[
     {'name':'Category1','id':'cat1'},
     {'name':'Category2','id':'cat2'},
     {'name':'Category3','id':'cat3'},
     {'name':'Category4','id':'cat4'}
 ];


var arr_Department=[
     {'name':'departments 1','id':1},
     {'name':'departments 2','id':2},
     {'name':'departments 3','id':3},
     {'name':'departments 4','id':4}
 ];
 
 
 var arr_ItemType=[
     {'name':'itemtypes 1','id':1},
     {'name':'itemtypes 2','id':2},
     {'name':'itemtypes 3','id':3},
     {'name':'itemtypes 4','id':4}
 ];

 var arr_Publisher=[
     {'name':'publisher 1','id':1},
     {'name':'publisher 2','id':2},
     {'name':'publisher 3','id':3},
     {'name':'publisher 4','id':4}
 ];


$(document).on('change','#checkbox',function(){  
           if($(this).is(':checked')){
             $('.form-check-label').text('Multiple Options');
             for(var i=1;i<defaultOptions.length;i++){
                $('.'+defaultOptions[i].value).attr('multiple','multiple');
                $('.'+defaultOptions[i].value).multiselect('rebuild');
             }
          }else{
           $('.form-check-label').text('Single Options');
              for(var i=0;i<defaultOptions.length;i++)
              {
                    $('.'+defaultOptions[i].value).removeAttr('multiple');
                    $('option', $('.'+defaultOptions[i].value)).each(function(element) {            
                        $(this).removeAttr('selected').prop('selected', false);
                        });
                    $('.'+defaultOptions[i].value).multiselect('rebuild');
              }
          }
       });

    
$(document).on('change','.main_menu',function(){
     
     
     var SelectedValue=$(this).val();
     
    
       if(selectedMenu.indexOf(SelectedValue)==-1){
         selectedMenu.push(SelectedValue); 
         var options='';
        
         if(SelectedValue=='Category'){
         
            for(var i=0;i<arr_Category.length;i++){
               options=options+'<option value="'+arr_Category[i].id+'">'+arr_Category[i].name+'</option>';
            }
         }else if(SelectedValue=='Department'){
            for(var i=0;i<arr_Department.length;i++){
               options=options+'<option value="'+arr_Department[i].id+'">'+arr_Department[i].name+'</option>';
            }
         }else if(SelectedValue=='ItemType'){
            for(var i=0;i<arr_ItemType.length;i++){
               options=options+'<option value="'+arr_ItemType[i].id+'">'+arr_ItemType[i].name+'</option>';
            }
         }else if(SelectedValue=='Publisher'){
            for(var i=0;i<arr_Publisher.length;i++){
               options=options+'<option value="'+arr_Publisher[i].id+'">'+arr_Publisher[i].name+'</option>';
            }
         }
         
           var SelectDiv= '<select class="'+SelectedValue+'" name="'+SelectedValue+'" multiple="multiple">'+options+'</select>';
           var AndOptions='';

           for(var i=0;i<defaultOptions.length;i++){
               AndOptions=AndOptions+'<option value="'+defaultOptions[i].value+'">'+defaultOptions[i].name+'</option>';
           }
           
         var AndSelectDiv= '<select class="main_menu">'+AndOptions+'</select>';
          var tr1='<tr><td>'+SelectedValue+'</td><td>'+SelectDiv+'</td></tr>';
          var tr2='<tr class="bg-dark"><td colspan="2">'+AndSelectDiv+'</td></tr>'
           
          $('#tableBody').append(tr1+tr2);
          $('.'+SelectedValue).multiselect();
       }
    
});


$(document).on('click','#btn',function(){
   alert($("form").serialize());
});

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>

<form >
<table class="table table-hover table-borderd">
<thead class="thead-dark">
<tr><th colspan="2">

<!--MAIN MENU-->
<select class="main_menu">
    <option value="none">Select One</option>
    <option value="Department">Department</option>
    <option value="Category">Category</option>
    <option value="ItemType">ItemType</option>
    <option value="Publisher">Publisher</option>
   
</select>

</th></tr>
</thead>
<tbody id="tableBody">

</tbody>
<tfoot class="bg-warning">
<tr>
<td>Enable / Disable</td>
<td>
<div class="form-group form-check">
    <input type="checkbox" id="checkbox" class="form-check-input" checked>
    <label class="form-check-label" for="checkbox"> </label>
  </div>
</td>
</tr>
<tr><td colspan="2"><button class="btn btn-primary" id="btn" type="button">GET ALL INPUTS</button></td></tr>
</tfoot>
</table>
</form>

＆＃13;

删除bootstrap多选属性并启用单选

1 个答案: