本教程旨在指导开发者如何在基于jQuery的Selectivity.js插件创建的下拉列表中动态添加新选项。文章将重点讲解如何利用Selectivity.js提供的API方法，并解决从服务器端（如ASP.NET的ViewBag）获取数据并将其安全、正确地传递给前端JavaScript的问题。通过示例代码，您将学习如何初始化插件、格式化服务器数据为JSON，以及使用`selectivity('add', ...)`方法高效地更新下拉列表内容。
1. 理解Selectivity.js及其选项管理机制
Selectivity.js是一个功能丰富的jQuery插件，用于创建高度可定制的下拉选择框。与传统的HTML
要正确地向Selectivity.js管理的下拉列表添加新值，必须使用其提供的API方法。Selectivity.js库在其文档中明确提供了管理选项的方法，其中最核心的就是 add 方法。
2. 初始化Selectivity.js下拉列表
在使用Selectivity.js之前，您需要将其绑定到一个HTML元素上，通常是一个 div 或 input 元素。在初始化时，可以定义初始选项、是否允许多选以及占位符文本等。
在上述代码中，#city-selector 是我们Selectivity.js实例的容器。
3. 使用Selectivity.js API动态添加选项
Selectivity.js提供了 selectivity('add', ...) 方法来动态添加选项。这个方法期望接收一个对象或对象数组，每个对象代表一个选项，并应包含 id 和 text 属性。
- id: 选项的唯一标识符。
- text: 选项显示给用户的文本。
例如，要添加一个名为 "Berlin" 的城市：
// 获取Selectivity实例
const $citySelector = $('#city-selector');
// 添加单个选项
$citySelector.selectivity('add', { id: 'berlin', text: 'Berlin' });
// 添加多个选项
$citySelector.selectivity('add', [
{ id: 'paris', text: 'Paris' },
{ id: 'london', text: 'London' }
]);4. 从服务器端（如ASP.NET ViewBag）获取数据并添加
在实际应用中，下拉列表的选项通常来自服务器端数据库。当使用ASP.NET MVC等框架时，数据可能通过 ViewBag 或 Model 传递到视图。直接将C#集合传递给JavaScript会导致类型不匹配的问题。正确的做法是将C#集合序列化为JSON格式，然后由JavaScript解析并使用。
假设您的 ViewBag.List 包含一个字符串列表，例如 ["Rome", "Madrid", "Tokyo"]。
4.1 服务器端数据准备 (ASP.NET MVC示例)
在您的控制器中：
public ActionResult MyView()
{
ViewBag.List = new List { "Rome", "Madrid", "Tokyo" };
return View();
} 4.2 前端JavaScript集成
在 .cshtml 文件中，您需要使用 Json.Encode 将C#集合转换为JSON字符串，并使用 Html.Raw 确保其作为纯文本输出到HTML，而不是被HTML编码。然后，JavaScript可以直接解析这个JSON字符串。
重要提示： 包含 ViewBag 或 Model 数据的JavaScript代码必须放置在 .cshtml 文件（或其他服务器端渲染的模板文件）中，而不是独立的 .js 文件中，以便服务器端代码能够正确执行并注入数据。
在上述代码中：
- @Html.Raw(Json.Encode(ViewBag.List)) 会在服务器端渲染时输出一个JavaScript数组字符串，例如 ["Rome", "Madrid", "Tokyo"]。
- optionsToAdd 变量现在是一个标准的JavaScript数组。
- 我们使用 forEach 循环遍历这个数组，为每个元素创建一个 { id: ..., text: ... } 对象。
- $citySelector.selectivity('add', ...) 方法被调用，将新选项添加到下拉列表中。
5. 完整示例代码结构
Selectivity.js 动态添加选项
Selectivity.js 动态添加选项教程
总结
通过本教程，我们学习了如何在Selectivity.js下拉列表中动态添加新值。核心要点包括：
- 使用Selectivity.js API： 避免直接操作原生DOM，而应使用 selectivity('add', { id: ..., text: ... }) 方法来管理选项。
- 服务器端数据处理： 将服务器端（如ASP.NET ViewBag）的集合数据通过 Json.Encode 和 Html.Raw 序列化为JSON格式，使其能被前端JavaScript安全地解析和使用。
- 代码位置： 包含服务器端数据注入的JavaScript代码必须位于服务器端渲染的模板文件（如 .cshtml）中，而不是独立的 .js 文件。
遵循这些指导原则，您可以高效且灵活地构建动态、交互性强的Selectivity.js下拉列表。
