jQuery中Select2组件删除option选项功能失效如何解决

你之前的代码失效有两个核心原因：

• 选择器大小写不匹配：你使用的$("#city").empty()中id为小写city，但实际元素id是大写开头的City，选择器未命中元素所以操作不生效
• 仅修改原生select属性后，没有通知Select2组件更新渲染，组件内部还保留了旧的选项缓存

完全移除所有下拉选项代码 #

// 清空原生select的所有option项
$("#City").empty();
// 触发change事件通知Select2重新渲染下拉列表
$("#City").trigger('change');

恢复为初始默认状态（保留默认None选项） #

如果你需要回到页面初始化时仅保留None选项的状态，使用以下代码：

// 清空所有选项后插入初始默认选项
$("#City").empty().append('<option value="None">None</option>');
// 重置选中值为默认值，同时触发Select2更新
$("#City").val("None").trigger('change');

注意事项 #

• 所有对Select2选项的修改都建议直接操作原始的<select>DOM元素，修改后通过trigger('change')通知组件更新即可，不需要重复调用select2()初始化
• 不要直接修改Select2自动生成的DOM结构，否则容易出现渲染异常

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