wählen Sie 2 + erhalten Wert beim Klicken

Question

Ich habe ein Problem, dass ich den Wert auf Click-Ereignis auswählen möchte. Ich versuchte mit Ereignis, aber ich bekomme alle Werte Komma getrennt statt aktuellen Wert.

Was ich tun möchte ist, Angenommen, es gibt mehrere Optionen mit einer All Option. Wenn also ein Benutzer die Option All auswählt, sollte er alle ausgewählten Optionen löschen und nur die Option All wird angezeigt.

Ich habe unten Codes versucht

$(".chzn-select").on('select2:selecting', function() { 
    var st = ($(this).select2('val')); 
} 

es null auf den ersten Klick zeigen.

Und

$(".chzn-select").on('change', function() { 
    var st = ($(this).select2('val')); 
} 

zeigen alle Werte in Komma getrennt Format. Es gibt kein Beispiel, das ich von onclick Ereignis mit select2 JS gefunden habe. Hier ist die Liste der events

HTML

<select name="country[]" multiple="" data-placeholder="Select country" class="form-control chzn-select" required="required" id="country"> 
    <option disabled="disabled" value="1">Abu Dhabi</option> 
    <option value="2">Dubai</option> 
    <option disabled="disabled" value="3">Singapore</option> 
    <option disabled="disabled" value="4">Thailand</option> 
    <option value="8">Afghanistan</option> 
    <option value="All">All</option> 
</select> 

Hier wird die jsfiddle

Answer 1

https://jsfiddle.net/bayahiassem/gtew005w/11/

$(".chzn-select").select2({selectOnClose: true}).on("select2:selecting", function(evt) { 
     if(evt.params.args.data.id == 'All') { 
     $(".chzn-select").val(null).trigger("change"); 
     } else { 
     $('.chzn-select > option[value=All]').prop("selected", false); 
     } 
    }); 

Answer 2

ich dich nicht bekommen. Wenn ich korrigiere.

$(this).select2('val').find(':selected'); 

Answer 3

Hier sind Sie. Es wird Ihnen die aktuelle ausgewählte Element geben (en) - Hold-Abfrage für eine Mehrfachauswahl

$(function() { 
 
    $(".chzn-select").on('change', function (evt) { 
 
    $('#selected').text('Selected: ' + ($(this).val())) 
 
    }) 
 
})

select { 
 
    width: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="country[]" multiple="" data-placeholder="Select country" class="form-control chzn-select" required="required" id="country"> 
 
    <option disabled="disabled" value="1">Abu Dhabi</option> 
 
    <option value="2">Dubai</option> 
 
    <option disabled="disabled" value="3">Singapore</option> 
 
    <option disabled="disabled" value="4">Thailand</option> 
 
    <option value="8">Afghanistan</option> 
 
    <option value="All">All</option> 
 
</select> 
 

 
<div id="selected"></div>

Answer 4

ich diese Hoffnung arbeiten,

$(".chzn-select").select2({selectOnClose: true}); 
$(".chzn-select").on("select2:select", function (evt) { 
    if($.inArray('All',$(this).val()) != -1){ 
    $(this).val('All').trigger("change"); 
    } 
}); 

Ersetzen Sie Ihren Js-Code mit diesem, es wird funktionieren.

Hier ist jsfiddle Link für Arbeitscode.