Dropdown Renders twice?

[AnthonyLombard]

this is the html it spits out

<span class="multiselect-native-select"><span class="multiselect-native-select"><select id="example-getting-started" multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select><div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="cheese"> Cheese</label></a></li><li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="tomatoes"> Tomatoes</label></a></li><li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="mozarella"> Mozzarella</label></a></li><li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="mushrooms"> Mushrooms</label></a></li><li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="pepperoni"> Pepperoni</label></a></li><li class=""><a tabindex="0"><label class="checkbox"><input type="checkbox" value="onions"> Onions</label></a></li></ul></div></span><div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="cheese"> Cheese</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="tomatoes"> Tomatoes</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="mozarella"> Mozzarella</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="mushrooms"> Mushrooms</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="pepperoni"> Pepperoni</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="onions"> Onions</label></a></li></ul></div></span>

on page code

<select id="example-getting-started" multiple="multiple"> <option value="cheese">Cheese</option> <option value="tomatoes">Tomatoes</option> <option value="mozarella">Mozzarella</option> <option value="mushrooms">Mushrooms</option> <option value="pepperoni">Pepperoni</option> <option value="onions">Onions</option> </select> <script type="text/javascript"> $(document).ready(function() { $('#example-getting-started').multiselect(); }); </script>

do you have any idea why?

[syedali90]

any solution to this ? i'm also facing this ..

[john-hall]

Same here... I'm getting the standard multiselect rendered (with options) before the plug-in rendering, which does not have any options.

[msdabre]

you can hide the select element

[junimbarrico]

maybe you are calling the css file like script not like link

[davidstutz]

Are you using the master branch?

[seyfer]

I have the same issue.

@davidstutz, The version used is "bootstrap-multiselect": "^0.9.13" with bower

UPD. no, two selects rendered in master in ^0.9.13 I just don't have the dropdown...

[HH-1]

Hi! Same here. The problem disapear if I remove bootstrap.min.css(3.3.2) from my page's sources. If I upgrade to 4.0.0, the double rendering disapear, but when I click on the button, there is no dropdown. I'm currently using v0.9.15 of bootstrap-multiselect

[dansamara]

Component has bug with multi wrapper on re-init select:

https://jsfiddle.net/wdpyufhs/

Bootstrap: 4.1.0 jQuery: 3.3.1 Bootstrap-multiselect: 0.9.15

[rbeurskens]

For me it may be a different issue, but similar symptoms. In my case, i was calling .multiselect('refresh') indirectly from the onInitialized handler (as i needed to set my options dynamically and then refresh it.) - thought onInitialized is called from within the Multiselect constructor, whose return value is stored on the <select> node (but it has not returned yet, so it calls itself recursively because it checks if .data("multiselect") is set to determine whether it will create an instance or call a method on it.