Lösche Standardauswahl Wert `Bootstrap Select2`

Question

Ich benutze bootstrap select2 und ich muss damit umgehen auswählen, so dass der voreingestellte Wert null bei der Auswahl anderer Optionen gelöscht werden soll.

HTML-Code

<select class="selectpicker" multiple="" name="maritalstatus[]" id="marital-status"> 
    <option selected="selected" value="">Does Not Matter</option> 
    <option value="unmarried">Unmarried</option> 
    <option value="divorce">Divorced</option> 
    <option value="widow">Widowed</option> 
    <option value="awaited-divorce">Awaiting Divorce</option> 
</select> 

JSCode

$("select").select2({ 
    theme: "bootstrap", 
    containerCssClass: ':all:', 
    dropdownCssClass: 'no-search', 
    allowClear: true, 
}); 

UI

Jetzt wie in der UI, wenn ich eine der Optionen außer Does Not Matter auswähle, dann sollte Does Not Matter immer gelöscht werden.

Regel:

• Nicht Option Materie kann nicht zusammen mit den anderen Optionen existieren.

Answer 1

Ich schaffte es mit unten Lösung zu lösen ..

removeDefaultSelect2Value: function() { 
    const selectIDs = "#id1, #id2"; 
    $(selectIDs).on("select2:select", function(e) { 
    var $el = $(this); 
    var data = e.params.data; 
    //console.log(data.element); 
    if (data.id === "") { 
     $(this).select2("val", 0, true); 
    } else { 
     setTimeout(function() { 
     $el 
      .next("span") 
      .find(
      'li[title="Does Not Matter"] .select2-selection__choice__remove' 
     ) 
      .click(); 
     }, 10); 
    } 
});