CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-multiselect
Narendra Rawat
Narendra Rawat

Reputation: 363

How to customize/convert bootstrap multiselect to single select conditionally w/o radio buttons

The HTML is as below:- 

<select name="companyName"  id="ddlCompanyId" name="companyList" multiple="multiple" ></select>

I am using bootstrap-multiple.js and conditionally want to use single select without radio buttons.

thanks in advance!

Upvotes: 1

Views: 4433

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

In order to remove/hide the radio buttons you can add a new style in your css or you can use the following event:

onDropdownShown: A callback called after the dropdown has been shown.

To change from multi to single selection it's enough to toggle the html attribute multiple="multiple", rebuild plugin.

From comment:

and how to clear selection on single select dropdown with bootstrap multiselect?

multiple: ....using the plugin for single selections (without the multiple attribute present), the first option will automatically be selected if no other option is selected in advance.

That means: you need to use jQuery .val() with an empty string to deselect each option.

$('#ddlCompanyId').multiselect({
    onDropdownShown: function(e) {
        if (this.options.multiple == false) {
            this.$container.find(':radio').hide();
        }
    }
});

$('#btnToggle').on('click', function(e) {
    $('#ddlCompanyId').attr('multiple', function(idx, attr) {
        return (attr==undefined) ? 'multiple' : null;
    });
    // deselect ...
    $('#ddlCompanyId').val('');
    // rebuild the whole dropdown...
    $('#ddlCompanyId').multiselect('rebuild');
});


$('#btnToggleDisable').on('click', function(e) {
    if ($('#ddlCompanyId').is(':disabled')) {
        $('#ddlCompanyId').multiselect('enable');
    } else {
        $('#ddlCompanyId').multiselect('disable');
    }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>



<div class="container">
    <div class="row">
        <select id="ddlCompanyId" 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>
        <button class="btn btn-primary" type="button" id="btnToggle">Toggle Multiselect</button>
        <button class="btn btn-primary" type="button" id="btnToggleDisable">Toggle disable</button>
    </div>
</div>

Upvotes: 4

Related Questions