javascriptjquerybootstrap-multiselect

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


Solution

  • 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