CODEWITHSUNDEEP
javascriptjquerybootstrap-multiselect
Sunil Prajapati
Sunil Prajapati

Reputation: 198

onselect remove element from Bootstrap Multiselect dropdown

I have two bootstrap mutiselect dropdown. And my requirement is, If I select any one option from first dropdown then selected option should be removed from second dropdown. Also if I deselect it then it should be add to second dropdown.

Here is link

https://jsfiddle.net/cpxavier/6escna8k

Upvotes: 3

Views: 2733

Answers (2)

Yellen
Yellen

Reputation: 1800

Change your document.ready to this 

$(document).ready(function() {
    $('.multi2').multiselect({ // this is the second multiselect
        includeSelectAllOption: false,
        nonSelectedText: 'Select Teams',
    });
    $('.multi1').multiselect({ // this is the first multiselect
        includeSelectAllOption: false,
        nonSelectedText: 'Select Teams',
        onChange: function(option, checked, select) { // implement onChange listener
        // clear all selection of the second dropdown - This will be called whenever there's a change in the first multiselect
        // You can think of puting in some additional conditions here.
            $('.multi2').multiselect('clearSelection', false);
        }
    });
});

You'll also need to update your html as - 

<select id="team0" name="team0[]" class="multi1" multiple="multiple"><!-- first dropdown-->

and 

<select id="team1" name="team0[]" class="multi2" multiple="multiple"><!-- second dropdown-->


<iframe width="100%" height="300" src="//jsfiddle.net/yellen/fw32gwd2/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

For more references: http://davidstutz.github.io/bootstrap-multiselect/#methods

Upvotes: 0

Sowemimo Bamidele
Sowemimo Bamidele

Reputation: 129

I dont know what you want to achieve the multiple selection.

But this jQuery Library is very good for multiple selection, easy to manipulate and more flexible.

JQuery Magic Suggest

With good documentations

Upvotes: 0

Related Questions