Mit jQuery, Wert zu Select2 zuweisen Dropdown-Auswahl funktioniert nicht

Question

Ich habe ein Kontrollkästchen, das, wenn aktiviert, einen Wert zu einem Dropdown-Auswahlfeld zuweisen. Das Problem besteht darin, dass das Dropdown-Menü für die Auswahl mit Select2 entworfen wurde und das Zuweisen des Werts für die Auswahl nicht funktioniert.

Ich habe die Lösung für eine Weile gesucht, aber habe keine klare Lösung mit Erklärung. Ich hoffe, Sie können mir helfen, wie ich das Problem lösen kann. Vielen Dank im Voraus für den Vorschlag.

Hier ist das Arbeitsbeispiel, wie es 'ohne Select2' funktioniert. fiddle link.

Hier ist das Snippet und fiddle 'mit Select2' Version des 'nicht funktioniert' Beispiel:

$(".js-example-basic-single").select2(); 
 

 
$(function() { 
 
    $("#geStd").click(function() { 
 
     if ($(this).attr('id') === "geStd") { 
 
     $("select#appearance").val("green"); 
 
     } else { 
 
     $("#geStd").prop('checked', false); 
 
     } 
 
    }); 
 
    $("select").change(function() { 
 
     if (this.value !== "green") { 
 
     $("#geStd").prop('checked', false); 
 
     } 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.full.min.js"></script> 
 

 
<div class="col-md-9"> 
 
    <input id="geStd" type="checkbox"> 
 
    <label for="geStd">Set to standard</label> 
 
</div> 
 
<div class="row"> 
 
    <label for="" class="col-md-4">Appearance</label> 
 
    <div class="col-md-8"> 
 
     <select id="appearance" name="" class="form-control js-example-basic-single"> 
 
     <option value="">Select one</option> 
 
     <option value="red">Red</option> 
 
     <option value="green">Green</option> 
 
     </select> 
 
    </div> 
 
</div>

Answer 1

Sie das change Ereignis auslösen können den Auswahlwert Refresh zu erzwingen:

Answer 2

Dazu müssen Sie/refresh, mit select2aufrufen 10 Ereignis, fügen Sie einfach diese zu Ihrem Code, wenn neuen Wert zuweisen:

$("select#appearance").val("green").trigger('change'); 

wird so etwas wie

$(".js-example-basic-single").select2(); 
 

 
$(function() { 
 
    $("#geStd").click(function() { 
 
     if ($(this).attr('id') === "geStd") { 
 
     $("select#appearance").val("green").trigger('change'); 
 
     } else { 
 
     $("#geStd").prop('checked', false); 
 
     } 
 
    }); 
 
    $("select").change(function() { 
 
     if (this.value !== "green") { 
 
     $("#geStd").prop('checked', false); 
 
     } 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.full.min.js"></script> 
 

 
<div class="col-md-9"> 
 
    <input id="geStd" type="checkbox"> 
 
    <label for="geStd">Set to standard</label> 
 
</div> 
 
<div class="row"> 
 
    <label for="" class="col-md-4">Appearance</label> 
 
    <div class="col-md-8"> 
 
     <select id="appearance" name="" class="form-control js-example-basic-single"> 
 
     <option value="">Select one</option> 
 
     <option value="red">Red</option> 
 
     <option value="green">Green</option> 
 
     </select> 
 
    </div> 
 
</div>