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
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.
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! :)
Thansk a mil
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.
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.