Remove old selected value from select2 list-CodePudding

I have a select with one of the options disabled (it disables/enables dinamically while a user clicks on another fields of form, adding the "disabled" attribute with jquery):

<select style="width:50%;" name="custom">
<option value="0" disabled>ND</option>
<option value="1">Alex Burn</option>
<option value="2">Tom Johnes</option>
<option value="3">Serhio Aguero</option>
<option value="4">Eugeny Petrosyan</option>
<option value="5">Mark Twen</option>
<option value="6">Jack Sparrow</option>
<option value="7">Luci Night</option>
<option value="8">Silvia Rodger</option>
<option value="9">Marko Roys</option>
<option value="10">Voldemar Fermer</option>
</select>

For some reason i have to make first option of this select as selected, and i can't modify this part of code:

$("[name='custom']").select2();
$("[name='custom']").val($("[name='custom'] option:first").val());
$("[name='custom']").select2("val", $("[name='custom'] option:first").val());

I don't want to see disabled option in my select2 list, and i use some css to hide it:

.select2-results__option[aria-disabled="true"] {
        display: none;
    }

It hides from select2 list, but... still displays as selected value. How can i avoid displaying it also as selected value?

Here is a fiddle https://jsfiddle.net/y1tsh8ka/4/

CodePudding user response：

Try this one

$("[name='custom']").select2();
$("[name='custom']").val($("[name='custom'] option:first").val());
$("[name='custom']").select2("val", $("[name='custom'] option:not([disabled]):first").val());

Instead of selecting the first value, it selects the first value that is not disabled