本教程旨在指导开发者如何在基于jQuery的Selectivity.js插件创建的下拉列表中动态添加新选项。文章将重点讲解如何利用Selectivity.js提供的API方法，并解决从服务器端（如ASP.NET的ViewBag）获取数据并将其安全、正确地传递给前端JavaScript的问题。通过示例代码，您将学习如何初始化插件、格式化服务器数据为JSON，以及使用`selectivity('add', ...)`方法高效地更新下拉列表内容。
1. 理解Selectivity.js及其选项管理机制
Selectivity.js是一个功能丰富的jQuery插件，用于创建高度可定制的下拉选择框。与传统的HTML <select> 元素不同，Selectivity.js会接管并渲染自己的DOM结构来表示下拉列表。这意味着，直接通过JavaScript操作原生DOM（例如 new Option() 或 ul.options[ul.options.length] = newOption;）来添加选项是无效的，因为Selectivity.js不会感知到这些变化。
要正确地向Selectivity.js管理的下拉列表添加新值，必须使用其提供的API方法。Selectivity.js库在其文档中明确提供了管理选项的方法，其中最核心的就是 add 方法。
2. 初始化Selectivity.js下拉列表
在使用Selectivity.js之前，您需要将其绑定到一个HTML元素上，通常是一个 div 或 input 元素。在初始化时，可以定义初始选项、是否允许多选以及占位符文本等。
<html>
<body>
<main>
<form action="#">
<div class="form-group col-xs-12 col-sm-4" id="city-selector"> </div>
</form>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/selectivity-full.min.js"></script> <!-- 确保引入Selectivity.js库 -->
<script>
$(document).ready(function() {
$('#city-selector').selectivity({
items: ['Amsterdam', 'Antwerp'], // 初始选项
multiple: true,
placeholder: 'Type to search a city'
});
// 后续将在此处添加动态选项的逻辑
});
</script>
</body>
</html>在上述代码中，#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<string> { "Rome", "Madrid", "Tokyo" };
return View();
}4.2 前端JavaScript集成
在 .cshtml 文件中，您需要使用 Json.Encode 将C#集合转换为JSON字符串，并使用 Html.Raw 确保其作为纯文本输出到HTML，而不是被HTML编码。然后，JavaScript可以直接解析这个JSON字符串。
重要提示： 包含 ViewBag 或 Model 数据的JavaScript代码必须放置在 .cshtml 文件（或其他服务器端渲染的模板文件）中，而不是独立的 .js 文件中，以便服务器端代码能够正确执行并注入数据。
<script>
$(document).ready(function() {
// 初始化Selectivity.js
const $citySelector = $('#city-selector');
$citySelector.selectivity({
items: ['Amsterdam', 'Antwerp'],
multiple: true,
placeholder: 'Type to search a city'
});
// 从ViewBag获取并添加动态选项
// @Html.Raw(Json.Encode(ViewBag.List)) 会将C# List<string> 转换为 JavaScript 数组
const optionsToAdd = @Html.Raw(Json.Encode(ViewBag.List));
// 遍历数组并使用Selectivity.js的'add'方法添加每个选项
optionsToAdd.forEach((optionText, index) => {
$citySelector.selectivity('add', { id: optionText.toLowerCase(), text: optionText });
// 注意：id可以根据实际情况生成，这里使用小写文本作为示例
});
});
</script>在上述代码中：
- @Html.Raw(Json.Encode(ViewBag.List)) 会在服务器端渲染时输出一个JavaScript数组字符串，例如 ["Rome", "Madrid", "Tokyo"]。
- optionsToAdd 变量现在是一个标准的JavaScript数组。
- 我们使用 forEach 循环遍历这个数组，为每个元素创建一个 { id: ..., text: ... } 对象。
- $citySelector.selectivity('add', ...) 方法被调用，将新选项添加到下拉列表中。
5. 完整示例代码结构
<!DOCTYPE html>
<html>
<head>
<title>Selectivity.js 动态添加选项</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入 Selectivity.js 样式和脚本 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectivity/2.1.0/selectivity-jquery.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectivity/2.1.0/selectivity-jquery.min.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.form-group { margin-bottom: 20px; }
#city-selector { width: 300px; } /* 设置选择框宽度 */
</style>
</head>
<body>
<h1>Selectivity.js 动态添加选项教程</h1>
<div class="form-group" id="city-selector"></div>
<script>
$(document).ready(function() {
// 1. 初始化 Selectivity.js 实例
const $citySelector = $('#city-selector');
$citySelector.selectivity({
items: ['Amsterdam', 'Antwerp'], // 初始静态选项
multiple: true,
placeholder: 'Type to search a city'
});
// 2. 模拟从服务器端获取数据（在 .cshtml 文件中，这里会是 @Html.Raw(Json.Encode(ViewBag.List))）
// 假设 ViewBag.List 包含 ["Rome", "Madrid", "Tokyo"]
const serverData = ["Rome", "Madrid", "Tokyo"];
// 3. 将服务器数据格式化并添加到 Selectivity.js 下拉列表
serverData.forEach((optionText, index) => {
// 为每个选项创建 id 和 text 属性
// id 可以是索引、数据库ID或文本的小写形式，确保唯一性
$citySelector.selectivity('add', { id: optionText.toLowerCase(), text: optionText });
});
// 您也可以在其他事件（如点击按钮）中添加选项
// $('#addOptionButton').on('click', function() {
// $citySelector.selectivity('add', { id: 'newcity', text: 'New City' });
// });
});
</script>
</body>
</html>总结
通过本教程，我们学习了如何在Selectivity.js下拉列表中动态添加新值。核心要点包括：
- 使用Selectivity.js API： 避免直接操作原生DOM，而应使用 selectivity('add', { id: ..., text: ... }) 方法来管理选项。
- 服务器端数据处理： 将服务器端（如ASP.NET ViewBag）的集合数据通过 Json.Encode 和 Html.Raw 序列化为JSON格式，使其能被前端JavaScript安全地解析和使用。
- 代码位置： 包含服务器端数据注入的JavaScript代码必须位于服务器端渲染的模板文件（如 .cshtml）中，而不是独立的 .js 文件。
遵循这些指导原则，您可以高效且灵活地构建动态、交互性强的Selectivity.js下拉列表。
