Clever Geek Handbook

Onselect remove item from Bootstrap Multiselect dropdown

I have two musket dropdowns. And my requirement is, if I select any one option from the first dropdown, then the selected option should be removed from the second dropdown. Also if I deselected then it should be added to the second dropdown menu.

Here is the link

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

+3


source to share


2 answers


Modify your document. Before

$(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 a change in the first multiselect
        // You can think of puting in some additional conditions here.
            $('.multi2').multiselect('clearSelection', false);
        }
    });
});

You will also need to update the 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>
Run codeHide result


Additional links: http://davidstutz.github.io/bootstrap-multiselect/#methods

0


source


I don't know what you want to achieve multiple choice.

But this jQuery library is very good for multiple choice, easy to manage and more flexible.



JQuery Magic Suggest

With good documentation

-1


source






More articles:


All Articles