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

Question

我希望在我的页面加载时默认选择下拉框的第一个元素。它已被选中，但不会发出AJAX请求。我希望它触发“select2:select”事件。只有下拉框中选定的部分会更改，不会执行AJAX请求。当我指定第一个元素时，我希望它像“select2: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
              })

})

- yunusunver

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>

- Swati

---

我遇到了这样的情况； 触发过程已经启动，但是这一次 e.params 变成了未定义并且报错。 - yunusunver

你需要使用 e.params.data 来获取所选值吗？你可以像这样传递所选值和其他值。 - Swati

是的，我需要获取选定的值，但为什么需要发送 e.params 呢？当已经选择时，我告诉您要做什么。我只想通过鼠标单击执行所选操作的代码。无法使用 Jquery 触发这个操作真的让我很烦恼。我不能再次发送 e.params，因为它是一个通用的运行结构。 - yunusunver

是的，我看了。你发的链接非常有用。谢谢 :) - yunusunver