Select2 下拉更改事件不起作用

Question

我正在使用 Select2 下拉菜单，我需要根据下拉选择执行一些功能。

我尝试了以下代码，但它对我不起作用。

$eventSelect.on("select2:select", function (e) { log("select2:select", e); });

$eventSelect.on("change", function (e) { log("change"); });

谁能告诉我如何才能完成这项工作？

Answer 1

我正在使用 select2 版本 3.3.2 并且以下代码对我有用

$("#id").on("change", function () { debugger; });

Answer 2

您可以在知道网页已完全加载后尝试声明事件，就我而言，这就是问题所在：

$(document).ready(function(){
    $('#yourselect').on("select2:select", function(e) { 
        console.log($(this).val());
    });
});

Answer 3

试试这个代码

$eventSelect.select2().on("change", function(e) {
          // mostly used event, fired to the original element when the value changes
          log("change val=" + e.val);
        })

Answer 4

$(document).on('change', '.js-example-basic-single', function(e) {
console.log($(this).val());})

Answer 5

我可以看到您从 select2 文档中获取了代码：

https://select2.github.io/examples.html#programmatic-control

您是否注意到他们在代码使用的下面定义了一个函数，称为 log()。

这是函数代码，你也包含了吗？

function log (name, evt) {
  if (!evt) {
      var args = "{}";
  } else {
      var args = JSON.stringify(evt.params, function (key, value) {
      if (value && value.nodeName) return "[DOM node]";
      if (value instanceof $.Event) return "[$.Event]";
      return value;
      });
  }
  var $e = $("<li>" + name + " -> " + args + "</li>");
  $eventLog.append($e);
  $e.animate({ opacity: 1 }, 10000, 'linear', function () {
      $e.animate({ opacity: 0 }, 2000, 'linear', function () {
          $e.remove();
      });
    });
}

或者，您可以使用 console.log() 输出到控制台。

Answer 6

在 select2 版本 4 中，事件发生了变化。这是旧版本的例子

$('#exampleVersionOld').select2().on('change', function(item){
    ...
});

这是一个新版本示例

$('#exampleVersion4').on('select2:select', function (e) {
    var item = e.params.data;
});

请注意，该新事件的项目结构也会发生变化。

这是所有新事件的列表

https://select2.org/programmatic-control/events

Answer 7

从版本4.0.0开始，可以使用以下事件：

参考：https://select2.org/programmatic-control/events

选择2：关闭
选择2：打开
选择2：打开
select2:选择
选择2：删除
select2:取消选择

例如：

(function($){
  $('.select2').select2();
  
  $('.select2').on('select2:selecting', function(e) {
    console.log('Selecting: ' , e.params.args.data);
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>



<select class="select2">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

Answer 8

一个常见问题是确保 AJAX 调用返回的数据结构正确且可访问。这是更新后的 JavaScript。

$(document).ready(function() {
$('#search').select2({
    placeholder: 'Search for an item',
    ajax: {
        url: '{{ route('search') }}', // Ensure this is the correct route
        dataType: 'json',
        delay: 250,
        processResults: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        id: item.id,
                        text: item.name,
                        name: item.name,
                        email: item.email
                    }
                })
            };
        },
        cache: true
    }
});

$('#search').on('select2:select', function (e) {
    var data = e.params.data; // Access the data directly
    $('#customer-name').val(data.name);
    $('#customer-email').val(data.email);
});
});

在控制器中

public function customers(Request $request)
{
    $search = $request->get('q');
    $data = Customer::where('name', 'LIKE', "%{$search}%")->limit(10)->get();
    return response()->json($data);
}