Search code examples
javascriptjqueryhtmlhtml-selectbootstrap-multiselect

Deselect top option in <select> - bootstrap multiselect

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>

Solution

  • I just had a look in the plugin, And here is what I understood, To remove default selection you must have your selection set as multiple='multiple', This is when you can see a Checkbox in the drop down rather than radio buttons.

    If you do not put this multiple option set then you will end up in having a radio button and this will set the first value by default. Here is the Fiddle which doesnt not select any default value. I just added the option multiple='multiple' to your dynamic select tag.

    To have the option multi select set and also be able to select only one at a time use the below code. You need to replace your code block with this one

            $("body").prepend("<select id=\"a-select\" multiple='multiple' >"             
        + optionsText +
        "</select>");

        $('#a-select').multiselect({
        on: {
            change: function(option, checked) {
                alert('sdd');
                var values = [];
                $('#a-select').each(function() {
                    if ($(this).val() !== option.val()) {
                        values.push($(this).val());
                    }
                });

                $('#a-select').multiselect('deselect', values);
            }
        }
    });

    Logic taken from http://davidstutz.github.io/bootstrap-multiselect/#further-examples, see the 5th example from here which says Simulate single selections using checkboxes.