I have a bootstrap multiselect html element that i fill with data from a web service call that gets a list of regions in New Zealand. I need to load those options into the <select> and not select the top option by default.

I have tried everything that is done via the bootstrap multiselect built in functions and options. Nothing will work. So i am resorting to vanilla javascript or vanilla jquery to go straight into the plain html and deselect the first option.

All work on this can be done in this jsfiddle

I had to copy paste a minified external resource (xml2json.min.js) into the top of the javascript editor because it wasn't playing nicely when I tried to add it as an external resource.

I have tried this:

$("ul.multiselect-container").find("li").removeClass("active");

And it doesn't work. It removes the active class but doesn't deselect the option. How do I deselect the option?

I have tried this:

$("ul.multiselect-container").find('input[type="radio":checked]').prop('checked', false);

It doesn't deselect the option.

Please see if you can deselect the top option of the select.

So the jsfiddle at url same as above but ending in 182 is my refactoring to try and make it easier for people to understand but it didn't end up working correctly on my friends laptop.

When using the plugin as a <select multiple=true> it doesn't select the top option by default. However I need that same behaviour with a normal <select>