使用 bootstrap-multiselect 将多选更改为单选下拉列表

Question

我们在应用程序中使用 bootstrap-multiselect.js 进行多选下拉菜单。 我们的多选代码为$(".select-drp").multiselect() 。 现在在一个条件下，我们必须通过 jquery 将此多选下拉菜单更改为单下拉菜单。 请提出一种方法来实现将多选下拉菜单更改为单下拉菜单。 提前致谢。

Answer 1

如果您可以从选择元素中删除多个属性，它将解决您的问题
如果不能，请尝试以下代码，但它将所有多选更改为单选，根据您的需要进行修改

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

Answer 2

有一种方法可以使复选框的行为类似于单选按钮组，并且还可以取消选中每个复选框，请参阅本节了解更多详细信息。 在示例中，有一个按钮可以将多选表单/到“多个”切换到“单”选择行为/从“单”选择行为切换。

细节在例子中注释

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

使用 bootstrap-multiselect 将多选更改为单选下拉列表

问题描述

2 个解决方案

解决方案1
0 2022-07-07 10:55:34

解决方案2
0 2022-07-07 13:01:57

使用 bootstrap-multiselect 将多选更改为单选下拉列表

问题描述

2 个解决方案

解决方案1 0 2022-07-07 10:55:34

解决方案2 0 2022-07-07 13:01:57

解决方案1
0 2022-07-07 10:55:34

解决方案2
0 2022-07-07 13:01:57