我无法捕获 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

如何找到我的 select2 元素

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

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

我不创建 select2 实例

如果 select2 是在其他地方生成的，您可以使用以下命令找到select应用了 select2 的原始版本：

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