使用 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