动态修改select2内容

最新推荐文章于 2023-08-10 11:26:47 发布

原创最新推荐文章于 2023-08-10 11:26:47 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#select2 #动态加载 #option

javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何在不刷新页面的情况下，动态修改Select2插件的下拉列表内容。通过销毁并重新初始化Select2，结合使用setTimeout确保DOM更新完成后再进行初始化，实现下拉列表数据的实时更新。

动态修改select2下拉列表内容

select2官方文档地址：http://select2.github.io/select2/#documentation
1、html代码及select2初始化

<div class="form-group">
    <label for="form_sl_class" class="control-label">******</label>
    <select class="form-control" id="form_sl_class" name="form_sl_class">
        <option></option>
    </select>                                                        
</div>

$("#form_sl_class").select2({
    placeholder: "请选择******",
    data: [
            { id: 1, text: "***" },
            { id: 2, text: "***" },
            { id: 3, text: "***" }
     ], 
    allowclear: true
});

2、动态修改select2下拉列表内容

function editSelect2(classdata){
    var instance = $("#form_sl_class").data('select2');
    if (instance) {
    	//清空销毁已有select2 
        $("#form_sl_class").select2('destroy').empty();
    }
	// 注：使用setTimeout方法间隔一段时间后执行select2初始化，否则可能初始化失败
    setTimeout(function () {
        $("#form_sl_class").select2({
            placeholder: "请选择******",
            data: classdata, // 重新设置新数据
            allowClear: true
        });
    }, 100)
}