如何在jQuery的Select2中为下拉框编写打开事件

你尝试使用的select2:open正是Select2官方提供的下拉框刚打开时触发的专属事件，问题大概率出在未初始化Select2组件或者事件绑定时机不对上，以下是修正后的完整方案：

1. 核心修正：先初始化Select2组件 #

原生<select>元素不会触发Select2的专属事件，必须先调用.select2()将其转换为Select2组件，再绑定事件。

2. 完整可运行代码示例 #

<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>

<div class="control">
  <select name="campus" id="js_pdp_campus" class="campusDataClass js-pdp-course-finder-select bned-select-input js-enable-select-input form-control js-basic-single" role="listbox">
    <option>campus 1</option>
    <option>campus 2</option>
    <option>campus 3</option>
  </select>
</div>

<script>
// 确保DOM加载完成后执行
$(document).ready(function() {
    // 第一步：初始化Select2组件
    $('#js_pdp_campus').select2();

    // 第二步：绑定下拉框打开事件
    $('#js_pdp_campus').on('select2:open', function(e) {
        console.log("下拉框已打开");
        const campusDataUrl = "/product-commons/getcampusdata/?baseProductCode=MBS_86530";
        
        $.ajax({
            type: 'GET',
            url: campusDataUrl,
            contentType: 'application/json',
            success: function (data) {
                console.log("获取到的校区数据：", data);
                // 可选：用返回的数据更新下拉选项
                // const $select = $(this);
                // $select.empty();
                // data.forEach(item => {
                //     $select.append(new Option(item.name, item.id));
                // });
                // $select.trigger('change'); // 更新Select2的显示状态
            },
            error: function(error) {
                console.error("获取校区数据失败：", error);
            }
        });
    });
});
</script>

3. 关键注意事项 #

• 事件绑定时机：必须在DOM完全加载后（即$(document).ready()中）初始化Select2并绑定事件，避免元素未加载导致绑定失败。
• 避免重复绑定：如果多次执行初始化或事件绑定，会导致事件触发多次，建议将初始化和事件绑定代码放在只会执行一次的逻辑中。

4. 其他常用Select2事件（扩展参考） #

• select2:opening：下拉框即将打开时触发（比select2:open更早）
• select2:close：下拉框关闭时触发
• select2:select：选中下拉选项时触发

内容的提问来源于stack exchange，提问作者sap developer