Change multiselect to single select dropdown with bootstrap-multiselect
Question
We have used bootstrap-multiselect.js for multiselect dropdown in application. We have the code for multiselect as $(".select-drp").multiselect() . Now on a condition, we have to change this multiselect dropdown to single dropdown through jquery. Please suggest a way to achieve changing multiselect dropdown to single dropdown. Thanks in advance.
2 answers
solution1
0 2022-07-07 10:55:34
If you can remove multiple attribute from select element, It would resolve your problem
If you can't, try below code but it will change all multiple select to single select, Modify as per your need
$('.multiple-select.one').multipleSelect(); let tempMultipleSelect = $.fn.multipleSelect; $.fn.multipleSelect = function () { this.removeAttr('multiple'); //remove attribute as per your logic return tempMultipleSelect.apply(this, arguments); } $('.multiple-select.two').multipleSelect();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/multiple-select@1.5.2/dist/multiple-select.min.css"> <label>Multiple</label> <select class="multiple-select one" data-placeholder="Select" multiple> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> </select> <hr> <label>Multiple Changed As Single</label> <select class="multiple-select two" multiple> <option selected disabled>Select</option> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> <option value="4">Fourth</option> </select>
solution2
0 2022-07-07 13:01:57
There's a way to make the checkboxes behave like a radio button group and also have the ability to have every checkbox unchecked as well, see this section for more details. In the example, there's a button that toggles the multi-select form/to 'multiple' to/from 'single' selection behavior.
Details are commented in example
// Initialize plugin $('.select').multiselect(); // Bind <form> to reset event $('#interface').on('reset', multiSingle); // Define status flag let mode = 'multiple'; // Pass event object by default function multiSingle(e) { /* Toggle reset button class, deselect any <option>s, and destroy the plugin */ $('.toggle').toggleClass('multiple, single'); $('.select').multiselect('deselectAll'); $('.select').multiselect('destroy'); /* If mode is 'multiple'... ...initialize plugin... ...change checkbox behavior to that of a radio button group, with the added benefit of unchecking the currently checked checkbox... ...then set mode to 'single' */ if (mode === 'multiple') { $('.select').multiselect({ onChange: function(option, checked) { let values = []; $('.select option').each(function() { if ($(this).val() !== option.val()) { values.push($(this).val()); } }); $('.select').multiselect('deselect', values); } }); mode = 'single'; /* Otherwise initialize plugin as it was originally and set mode to 'multiple' */ } else { $('.select').multiselect(); mode = 'multiple'; } }
.multiple::before { content: 'Single' } .single::before { content: 'Multiple' }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="//davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-4.5.2.min.css" rel="stylesheet" /> <link href="//davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet" /> </head> <body> <form id='interface' class='container'> <fieldset class='row' style='display:flex'> <div class='btn-grp' style='margin:20px 0 0 0'> <select class="select" multiple="multiple"> <option value="cheese"> Cheese </option> <option value="tomatoes"> Tomatoes </option> <option value="mozzarella"> Mozzarella </option> <option value="mushrooms"> Mushrooms </option> <option value="pepperoni"> Pepperoni </option> <option value="onions"> Onions </option> </select> <button class='btn btn-primary toggle multiple' type='reset'></button> </div> </fieldset> </form> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap.bundle-4.5.2.min.js"></script> <script src="//davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.