Any way to disable a particular option after loading the <select> options in select2, bootstrap-select etc

Problem:

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.

It would hv been easier to identify what exactly you meant if you sent your source code.

Here are some resources to read -
-Some similar question asked in a jquery forum
-A snippet which might be useful from codegrepper
- Search Google!! A programmers best friend ; )

here’s an example :

select 1

<select  multiple id="select1">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

select 2

<select  multiple id="select2">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

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

I think select2 tends to collide with jQuery.

Can you put all of it into a codepen file and send if possible.

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.

Simple Example (edit switched to Codepen)


Post a live example so we can see the code.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.