如何使用jQuery为带multiple属性的select元素增删选项？

添加选项的常用方法 #

不管是普通select还是带multiple的多选下拉框，jQuery的DOM操作逻辑本质一致，以下是几种可靠的实现方式：

1. 单个添加选项
   直接创建<option>元素并追加到目标select中，支持设置value、文本和选中状态：

// 向id为multi-select的多选框添加单个选项
$('#multi-select').append($('<option>', {
    value: 'apple',
    text: '苹果',
    selected: true // 可选：默认选中该选项
}));

2. 批量添加选项
   如果需要一次性添加多个选项，可以通过循环遍历选项数组实现：

// 定义要添加的选项数组
var fruitOptions = [
    {value: 'banana', text: '香蕉'},
    {value: 'orange', text: '橙子'},
    {value: 'grape', text: '葡萄'}
];

var $multiSelect = $('#multi-select');
// 循环追加所有选项
fruitOptions.forEach(option => {
    $multiSelect.append($('<option>', option));
});

移除选项的常用方法 #

根据不同需求，有几种针对性的移除方式：

1. 移除指定值的选项
   通过属性选择器定位到目标选项后移除：

// 移除值为'apple'的选项
$('#multi-select option[value="apple"]').remove();

2. 移除所有选中的选项
   利用:selected选择器批量移除当前选中的选项：

// 移除多选框中所有被选中的选项
$('#multi-select option:selected').remove();

3. 清空所有选项
   直接清空select的所有子元素：

// 清空多选框的所有选项
$('#multi-select').empty();

解决「选项已添加但不显示」的问题 #

你遇到的选项已添加但列表不显示的情况，大概率是以下原因之一：

• 选择器错误：确认你的jQuery选择器（id/class）准确指向了目标多选框，没有选中其他元素
• DOM加载时机问题：如果多选框是动态生成的（比如通过AJAX渲染），要确保在元素已经存在于DOM中后再执行添加操作
• 浏览器重绘问题：极少数情况下，浏览器可能没有及时重绘元素，可以尝试触发change事件强制更新：

$('#multi-select').trigger('change');

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