onselect remove element from Bootstrap Multiselect dropdown

Question

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

Please [edit] the externally hosted code into the post; doing so will make sure it remains useful even if the link breaks. My script [is not allowed to do this](https://meta.stackoverflow.com/a/344512/4751173) because of potential licensing problems. — Glorfindel, Jul 28 '22 at 08:03

score 0 · Answer 1 · answered Jun 06 '15 at 16:33

0

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

answered Jun 06 '15 at 16:33

Sowemimo Bamidele

129
2
14

Ya...that is not what i want.Please check jsfiddle..here is the link.https://jsfiddle.net/cpxavier/6escna8k/ – Sunil Prajapati Jun 08 '15 at 05:46

Yellen · Accepted Answer · 2015-06-08T07:50:52.060

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

onselect remove element from Bootstrap Multiselect dropdown

2 Answers2