如何使用 select2 初始化默认值并触发 ajax 请求（select2:select）？

Question

我希望 select 框的第一个元素在我的页面加载时默认 selected。它是 selected 但没有提出 ajax 请求。我希望它触发 'select2: select' 事件。只有 select 框中的 selected 部分发生变化，它不会执行 ajax 请求。当我分配第一个元素时，我希望它像 'select2: select' 一样工作。所以当我select第一个元素时，应该在ajax请求中触发。

// the part where I select the first element by default. The part that doesn't work as I want
$('select[name=items]').prop('selectedIndex', 1).trigger('change.select2');

// For event being selected in selectboxt
$('select[name=items]').on('select2:select', function (e) {
        $.ajax({
                "url":'myendpoint',
                "headers": {
                        
                },
                "method": "GET",
                "success": function (data) {
                     
                 //my operations
              })

})

Answer 1

您可以使用 change 事件，这将在您执行 trigger('change') 或使用 .trigger("select2:select") 触发 select2:select 事件时触发。

演示代码 :

$('select[name=items]').select2({
  width: "100px"
});
//other way using change event
$('select[name=items]').on('change', function(e) {
  console.log("i am inside chnge")
  //your ajax call

})
//using select:2
$('select[name=items]').on('select2:select', function(e) {
  console.log("i am inside seclet")
  //your ajax call

})
$('select[name=items]').prop('selectedIndex', 1).trigger('change').trigger("select2:select"); //trigger both

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<select name="items">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

如何使用 select2 初始化默认值并触发 ajax 请求（select2:select）？

How do I initialize by default value with select2 and trigger ajax request(select2:select)?

javascript

jquery

jquery-select2