select 2 + 获得点击价值

Question

我遇到了一个问题，我想在点击事件中使用 select 值。我尝试使用 change 事件，但我得到的所有值都以逗号分隔，而不是当前值。

我想做的是，假设有多个选项，其中有一个All选项。所以如果用户 select All 选项那么它应该清除所有 selected 选项并且只显示 All 选项。

我试过以下代码

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

它在第一次点击时显示 null。

和

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

以逗号分隔格式显示所有值。我没有找到带有 select2 JS 的 onclick 事件的示例。这是 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

我没听懂。如果我正确的话。

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

Answer 2

给你。它会给你当前选择的项目 - 按住 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 3

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 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 link。

select 2 + 获得点击价值

select 2 + get value on click

html

javascript

jquery

select2