выберите 2 + получить значение при нажатии

Question

У меня возникла проблема с тем, что я хочу значение выбора при событии click. я попытался с событием change, но я получаю все значения, разделенные запятыми вместо текущего значения.

Что я хочу сделать, предположим, что существует несколько вариантов с опцией All. Поэтому, если пользователь выбирает опцию All, тогда он должен очистить все выбранные опции и отобразит только All.

Я попытался ниже кодов

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

это показать null на первый щелчок.

И

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

показать все значения, разделенные запятыми формате. Нет примера, который я нашел из onclick события с select2 JS. Вот список 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> 

Вот это 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

я не получил вас. Если я исправлю.

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

Answer 3

Здесь вы находитесь. Это отдашь текущий выбранный элемент (ы) - Зажмите Ctrl для выбора нескольких

$(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

Я надеюсь, что это будет работать,

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

Замените код js этим, он будет работать.

Здесь jsfiddle ссылка на рабочий код.