点击按钮时如何重置Select2下拉框的选中数据？

原代码存在的问题 #

• 每次点击重置按钮都会新增一个空option节点，多次操作会产生大量冗余DOM，影响性能
• 仅操作原生DOM不会同步触发Select2组件的视图更新，会出现实际值已重置但界面仍展示旧选中项的问题

正确实现代码 #

Select2 4.x及以上版本（主流版本） #

直接调用Select2适配的标准重置方法即可，无需手动修改option节点，不会改动字段本身：

$(document).on("click",".reset",function(){
    // 置空选中值并触发change事件更新Select2视图
    $("#MyId").val(null).trigger("change");
})

如果你的下拉框预设了值为空的默认选项（如「请选择」），可以把null替换为空字符串''即可自动选中默认空选项。

Select2 3.x旧版本兼容写法 #

$(document).on("click",".reset",function(){
    $("#MyId").select2("val", "");
})

内容的提问来源于stack exchange，提问作者Darshit. Isync