我无法捕获 Select2 事件 - 我怀疑我使用了错误的 jquery 选择器

Question

这是我写的 javascript - 它提醒我发现了四个 .select2 实例和四个 select 元素并向控制台记录了一条消息，但是对我从 select2 框中选择的内容所做的任何更改实际上都不会记录或提醒我有关更改的信息。我怀疑我使用了错误的选择器来查找要将这些 change 侦听器附加到的对象，但我无法在文档中找到有关如何查找我的 select2 元素的完整示例。

$(document).on('change', '.select2-input', function(e) {
    console.log('Detected a different change!');
    alert('The other method of detecting changes worked!');
});
$('.select2').on('change', function(e) {
    console.log('Detected a change!');
    alert('Something was changed!');
});
console.log('Loaded!');
alert('Loaded v2 - found ' + $('.select2').length + ' instances of select2 and ' + $('select').length + ' instances of select.');

Answer 1

how to find my select2 elements

这与您将 select 转换为 select2 时使用的选择器相同，例如：

$('.my-select-dropdown').select2();

I don't create the select2 instances

在其他地方正在生成select2的情况下，可以找到select2应用到的原始selectusing:

$(".select2-hidden-accessible")

信息的关键位是事件是针对原始 select 下拉菜单而不是任何 select2 控件引发的，例如：

// this happens elsewhere that you don't have control over
$('.select2').select2();

// find the original "converted" drop downs
$('.select2-hidden-accessible').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data.id, data.text, $(".select2").val());
});

.select2 { width: 150px }

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

<select class="select2">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
</select>

我无法捕获 Select2 事件 - 我怀疑我使用了错误的 jquery 选择器

I'm unable to Capture Select2 Events - I suspect I'm using the wrong jquery selector

javascript

jquery

jquery-select2

jquery-select2-4