环境与初始化
先决条件与依赖
在正式动手前，确保你的开发环境具备jQuery与jQuery Selectivity 插件的正确版本，以及与项目兼容的浏览器。缺少任意一个依赖都可能导致动态添加新选项的逻辑失效，因此版本匹配是第一步。
如果你的项目还未引入插件，可以通过以下方式快速引入：CDN 加载或将插件文件放入项目并通过本地路径引用。确保同时包含插件所需的CSS和JS文件，以确保下拉框的样式和交互行为都能正常工作。
下面的示例以一个基础的多选 Selectivity 组件为场景，演示如何在原有数据基础上动态扩展选项集。请先准备一个用于初始化的目标容器和占位数据，以便后续的动态添加能无缝接入。
// 初始数据
var initialOptions = [{ id: 'beijing', text: '北京' },{ id: 'shanghai', text: '上海' }
];// 初始化插件
$(function() {$('#city-select').selectivity({items: initialOptions,allowClear: true});
});
方法一：使用插件的动态更新 API
核心思路
如果插件提供了动态更新 API，这是最优先推荐的路径。通过调用官方暴露的接口，在不重新初始化的情况下直接追加新选项，使现有数据和交互保持稳定。记住要先判断 API 的存在性，以实现兼容性和降级处理。
在许多场景中，目标是将新选项以[{ id, text }] 的形式加入到当前数据源中，同时更新显示层。通过这种方式可以确保用户在下一次打开下拉时就能看到新选项。
注意：不同版本的插件对 API 的命名可能略有差异，常见的命名包括 addOptions、setData、appendOptions 等。以下示例展示了一个兼容性友好的实现模板，帮助你在实际项目中进行对接。
// 动态添加选项的函数（优先使用插件原生 API；若无则回退到数据驱动更新）
function addOptionToSelectivity($el, option) {var instance = $el.data('selectivity');// 优先尝试插件原生 APIif (instance && typeof instance.addOptions === 'function') {instance.addOptions([option]); // 直接通过插件方法追加return;}// 回退方案：通过 setData 更新数据源if (instance && typeof instance.setData === 'function') {var data = instance.getData ? instance.getData() : (instance.options || []);data = Array.isArray(data) ? data.slice() : [];data.push(option);instance.setData(data);} else {// 最后兜底：重新初始化（见后续“方法二”的实现）var current = $('#city-select').val() || [];current.push(option.id);$('#city-select').val(current);}
}// 示例：点击按钮动态添加一个新选项
$('#add-option-btn').on('click', function() {var newOpt = { id: 'guangzhou', text: '广州' };addOptionToSelectivity($('#city-select'), newOpt);
});
完整代码示例
下面给出一个完整的端到端示例，包括初始化、动态添加按钮，以及简单的交互逻辑。你可以直接将其嵌入现有页面，并在浏览器中验证效果。
// 1) 初始化数据
var initialOptions = [{ id: 'beijing', text: '北京' },{ id: 'shanghai', text: '上海' }
];// 2) 初始化 Selectivity
$(function() {$('#city-select').selectivity({items: initialOptions,allowClear: true});
});// 3) 动态添加新选项的逻辑（优先使用插件原生 API，否则回退）
function addOptionToSelectivity($el, option) {var instance = $el.data('selectivity');if (instance && typeof instance.addOptions === 'function') {instance.addOptions([option]);return;}if (instance && typeof instance.setData === 'function') {var data = (instance.getData ? instance.getData() : instance.options) || [];data = Array.isArray(data) ? data.slice() : [];data.push(option);instance.setData(data);} else {// 最后兜底：直接更新原始数据并重新初始化var data2 = (instance && instance.options) ? instance.options.slice() : [];data2.push(option);$('#city-select').selectivity('destroy');$('#city-select').selectivity({ items: data2 });}
}// 4) 绑定交互：根据按钮点击添加新选项
$(document).on('click', '#add-option-btn', function() {var newOpt = { id: 'guangzhou', text: '广州' };addOptionToSelectivity($('#city-select'), newOpt);
});
方法二：通过重新初始化实现动态更新
适用场景与步骤
如果你所使用的插件版本不支持直接的动态追加 API，另一种可靠的方法是在添加新选项后销毁现有实例，再用更新后的选项集合重新初始化。该方法简单直观，兼容性更强，但在某些复杂场景下可能会让选中状态丢失。确保在重新初始化前妥善保存当前的选中值，以便在新实例中恢复。
实现流程大致为：读取当前数据源、把新选项合并进数据集合、销毁插件、重新初始化并传入更新后的数据。多选模式和单选模式在逻辑上并无本质差异，唯一区别在于初始配置的选项集合和后续获取选项的方式。
下面提供一个分步示例，展示如何通过重新初始化来应用新选项，并确保用户界面保持一致性。
// 步骤 1：获取并扩展数据源
function appendOptionAndReload($el, option) {var data = [];var inst = $el.data('selectivity');if (inst && inst.options) {data = inst.options.slice();} else if (typeof $el.selectivity === 'function') {// 兼容性兜底：尝试从已存在的 value 构建数据data = ($el.val() || []).map(function(v){ return { id: v, text: v }; });}data.push(option);// 步骤 2：销毁当前实例$el.selectivity('destroy');// 步骤 3：用扩展后的数据重新初始化$el.selectivity({items: data});
}// 示例调用
$('#add-option-btn').on('click', function() {appendOptionAndReload($('#city-select'), { id: 'nanjing', text: '南京' });
});
实战示例：从输入框添加新选项
交互设计与事件绑定
为了提升用户体验，可以提供一个简单的输入区，让用户输入新选项的文本和标识，然后通过按钮将该选项加入到下拉列表中。整个实现是对前述两种方法的实用增强，适合需要自定义新增项的场景。请确保文本输入合法并避免重复项，以保持数据的一致性。
交互设计的关键点在于：输入校验、防重复、以及在成功添加后给予用户即时反馈。下面给出一个完整的前端实现片段，包含输入区域、事件处理以及对请选择城市的即时增强。
// 初始化阶段（保持与前文一致）
$(function() {$('#city-select').selectivity({items: [{ id: 'beijing', text: '北京' },{ id: 'shanghai', text: '上海' }],allowClear: true});
});// 添加新选项的交互
$('#add-option-btn').on('click', function() {var id = $('#new-id').val().trim();var text = $('#new-text').val().trim();if (!id || !text) {alert('请同时填写“值（ID）”和“文本”');return;}// 避免重复项var exists = false;var inst = $('#city-select').data('selectivity');if (inst && inst.options) {exists = inst.options.some(function(opt) { return opt.id === id || opt.text === text; });}if (exists) {alert('该选项已存在，请使用唯一的ID或文本。');return;}// 使用动态更新 API（优先）或回退到重新初始化var newOpt = { id: id, text: text };if (typeof inst !== 'undefined' && typeof inst.addOptions === 'function') {inst.addOptions([newOpt]);} else {// 回退：直接扩展数据后重新初始化appendOptionAndReload($('#city-select'), newOpt);}// 清空输入框并给出正向反馈$('#new-id').val('');$('#new-text').val('');$('已添加: ' + text + '').insertAfter('#add-option-btn').delay(1500).fadeOut(400, function(){ $(this).remove(); });
});
