选择 2 + 点击获取值答案

【问题标题】：select 2 + get value on click选择 2 + 点击获取值
【发布时间】：2017-01-02 20:11:09
【问题描述】：

我面临一个问题，我希望在点击事件上选择值。我尝试使用 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

【问题讨论】：

你试过了吗：$(this).val()？
@R3tep ：是的，它还返回诸如2,3,4,...之类的值
请提供您的html
@urfusion 在下面查看我的答案

标签： javascript jquery html select2

【解决方案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);
      }
    });

【讨论】：

对不起，小提琴：）这是一个； jsfiddle.net/bayahiassem/gtew005w/7
选择所有其他国家。你会发现问题
什么问题，您说如果选择了 All 选项，您想清除所有选择的选项？我的代码就是这样做的 (jsfiddle.net/bayahiassem/gtew005w/7)
您没有说明如果用户选择全部然后选择另一个选项该怎么办？！
它的常识，如果你选择了所有国家选项，你是否也允许用户进入其他国家，如果是，那么该选项的用途是什么

【解决方案2】：

我没有得到你。如果我正确的话。

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

【讨论】：

TypeError: ":selected" 不是函数
$(this).find(':selected');检查这个
如果还有其他条目，那么它也会返回其他条目。

【解决方案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>

【讨论】：

我要清除所有选项是All选项被选中。
如果选择了All 选项，则以前的条目将从列表中删除，并且仅显示All 选项。

【解决方案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 链接。

【讨论】：