How to prevent two option value from being selected at the same time

How Do I...
#1

I have one select2 element which has ajax data source.

In my program I happen to set the value of one select2 element 2 times programmatically.

I have a JSBin which shows the code I have used in my scenario.

In my JSBin above, I set the value of one select2 element twice programmatically, but the option that is shown visually selected is the last option I set programmatically.But upon inspecting the source, you will realise the html select element has two option with value selected.

In my real program, two option of the select html element has the value of selected, but the one that is shown visually as the selected one is not the last one I set programmatically

This picture is when I view source of my real program.

omg.

In my real program, the option with value CA60010 is set first, then later after that the option value with SA60100 value is set next. However, visually on the screen, the one that is shown to be selected is ‘CA60010’.

Am I using the wrong technique to make one option selected? Do I have to use another method, such that at any one time only one option is selected?

#2

I’m not sure why your real program isn’t displaying the last item you set programmatically. When using an AJAX data source, the usual use case for programmatically setting a value is to pre-select a value in the Select2. If that’s what you’re doing, I don’t understand why you need to set two different values.

Without seeing your real program, I can’t troubleshoot the problem. However, I can recommend a work-around: simply delete any current <option> element(s) with the selected attribute from the HTML <selelct> element before setting the new one.

#3

Hello,

How do I go about deleting option with selected attribute?

I tried using code like that but it doesn’t seem to work on the JSBin example also.
$("#example1 option").prop(“selected”, false);
$("#example1 option:selected").each(function(){
$(this).removeAttr(“selected”);
});

#4

You need to delete the entire <option>, not just the selected attribute. Something like this should work:
$('#example1 option:selected').remove();

When Select2 operates in AJAX mode it only uses the HTML <select> element to hold items the user has actually selected. The Select2 dropdown list and the selected item(s) are managed internally by Select2—they don’t rely on the HTML <select> element except to communicate the selected item to the HTML <form>. So it is perfectly safe to remove any previously selected options when the user selects a new option.

#5

I just tested the code I provided above, and it works. However, it only removes one selected option at a time. In your JSBin you have two selected options, so you have to call that code twice to remove both of them. (I’m not sure why that’s the case–it seems that the :selected pseudo-class will only match the first selected option.) However, this code works in a single step:
$('#example1 option[selected]').remove();

So try that.