Bootstrap-select: change from multiselect to single select vice versa dynamically
I couldn't find way in the documentation to change option selecting functionality dynamically. For example while loading the page I've initialized as <select class="selectpicker" multiple> later at some point I want chagne
im4ravi
All 4 comments
Upon trying this for myself, I found that it is not directly possible to achieve this, although the plugin does offer the required tools to pull this off. You actually don't have to modify the DOM manually or anything. It makes use of the destroy method of the plugin.
I created a small proof-of-concept that achieves what you want. In my example, the change in select type is triggered by a button click. This can of course easily be adapted to whatever suits your needs. In case you already solved it yourself, I guess it's still good to have an example of how to do it for others that face this problem.
Now, given the following initial HTML:
<html>
<head>
<!-- Import the necessary stylesheets and javascript scripts -->
</head>
<body>
<select multiple id="slct1" class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<button id="btn1">Change select type</button>
</body>
</html>
We can add the following jQuery function:
jQuery(document).ready(function() {
jQuery("#btn1").on("click", function() {
/* Save reference to select, toggle multiple property. */
var select = jQuery("#slct1");
select.prop("multiple", !select.prop("multiple"));
/* Destroy the selectpicker and re-initialize. */
select.selectpicker('destroy');
select.selectpicker();
});
});
That's it. Please note that when switching from single to multi-select, it will select the currently selected option in the multi-select as well. Vice versa, the first option (of possibly more) will be selected after switching.
mvdpanne
on 5 Jul 2016
While @mvdpanne gave me the start to get what worked perfectly for me, I also had a minor mod and thought I'd leave it here for others.
In my select, I needed to still show the multiple dropdown list, but have only ONE item selected. This is simple enough to do in the select by adding
data-max-options="1"
though programmatically, using the example above,
replace
select.prop("multiple, !select.prop("multiple"));
with
select.data('max-options', 1);
This gives you just the one-select method in the dropdown - sweet! :)
TCOA
on 7 Jul 2018
Thansk a mil
MilvioLua
on 29 Jun 2020
I think this is an obscure enough thing that I won't add a method specifically for this (unless there is a lot of desire). Using destroy() first should work for most use cases.
caseyjhol
on 1 Jul 2020
Related issues
M1chae1
路
3Comments
dacavcosta
路
3Comments
bhritch
路
3Comments
neuropass
路
3Comments
Khrysller
路
3Comments
Most helpful comment
Upon trying this for myself, I found that it is not directly possible to achieve this, although the plugin does offer the required tools to pull this off. You actually don't have to modify the DOM manually or anything. It makes use of the
destroymethod of the plugin.I created a small proof-of-concept that achieves what you want. In my example, the change in select type is triggered by a button click. This can of course easily be adapted to whatever suits your needs. In case you already solved it yourself, I guess it's still good to have an example of how to do it for others that face this problem.
Now, given the following initial HTML:
We can add the following jQuery function:
That's it. Please note that when switching from single to multi-select, it will select the currently selected option in the multi-select as well. Vice versa, the first option (of possibly more) will be selected after switching.