I have two <select> with multiple select enabled with same values , so I want the option selected in the first <Select> disabled in the second <select> and vice versa, it may be possible to achieve this without using css libraries such as select2 and bootstrap-select but by using these, its not working.
what i want is if i select <option value="1">One</option> in select 1 , <option value="1">One</option> from the select 2 should be disabled, same for the select 2, if i choose <option value="2">Two</option> in select2 , same option two should be disabled in select one.
this can be done by using javascript or using jquery, but when you use third party css like bootstrap-select and select2, it changes the code and i couldn’t get it to work
Not sure how much help we can provide without knowing more information about your setup and code.
You can listen for the change event on the select element and look at the event target to see which of the select element was changed and then disable the option element in the other select with the index that matches.