页面加载时在 Select2 上设置所选项目 (ASPX)

Posted 2023-05-07

【中文标题】页面加载时在 Select2 上设置所选项目 (ASPX)

【英文标题】：Set selected items on Select2 when page load (ASPX)

【发布时间】：2021-07-05 17:32:31

【问题描述】：

我用谷歌搜索了大约 6 小时。有很多这样的 Select2 问题，但我仍然卡在这个问题上。

我想显示用户在页面加载后提交表单之前选择的项目。

jQuery 2.2.1, Select2 4.0.13

标记

<select id="ddlMaterial" class="rbp-material-ddl" multiple="multiple" style="width: 100%"> </select>

<script type="text/javascript">
    $(document).ready(function () 
        $.ajax(
            type: "POST",
            url: "RBP.aspx/GetOptionList",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) 
                var obj = JSON.parse(data.d);
                var s = '';
                ... make option group ...
                $('.rbp-material-ddl').html(s);
            
        );

        $('.rbp-material-ddl').select2(
            closeOnSelect: false, allowClear: true
        )

        $('.rbp-material-ddl').val(<%=selectedList%>).trigger('change');
    );
</script>

selectedList 是我存储用户选择的变量。

当我在页面加载时进行调试时，我得到了 $('.rbp-material-ddl').val(['help','me','please']).trigger('change');照原样执行，但 select2 什么也没显示。

当我在加载完所有内容后通过 Chrome DevTool 执行该命令时，select2 show 3 选择正确。 :'(

我也尝试了以下命令，但我没有运气。

$('.rbp-material-ddl').val(['please']);
$('.rbp-material-ddl').trigger('change');

请给我一些建议。

谢谢

【参考方案1】：

我发现 .. $ajax 在 select2.val() 被触发之前没有成功。

我将该函数移至成功回调并且它可以工作。