本文详细介绍了如何在jquery selectivity插件中动态添加新的下拉列表项。核心内容包括理解selectivity插件的`add`方法，以及如何正确地将服务器端数据（如asp.net mvc的`viewbag`）序列化为json格式，以便在客户端javascript中高效使用。文章提供了清晰的代码示例和关键注意事项，帮助开发者实现selectivity下拉菜单的灵活数据管理。
理解 Selectivity 插件的数据管理机制
Selectivity 是一个功能丰富的 jQuery 下拉选择插件，它提供了比原生
初始化 Selectivity 插件
首先，我们来看一下 Selectivity 插件的基本初始化方式。通常，我们会将插件绑定到一个容器元素（例如
），并提供初始的选项数据。
<div class="form-group col-xs-12 col-sm-4" id="example-2"> </div>
<script>
$(document).ready(function() {
$('#example-2').selectivity({
items: ['Amsterdam', 'Antwerp'], // 初始选项
multiple: true, // 允许多选
placeholder: 'Type to search a city' // 占位符文本
});
});
</script>在这个例子中，#example-2 是 Selectivity 插件的容器，items 数组定义了初始的下拉选项。
动态添加下拉列表项
Selectivity 插件提供了一个 add 方法，用于在运行时向下拉列表中添加新的选项。这个方法接受一个或多个表示选项的对象作为参数。
1. 使用 add 方法添加单个或多个选项
add 方法的基本用法如下：
// 获取 Selectivity 实例
const $list = $('#example-2');
// 添加单个选项
$list.selectivity('add', { id: 'new_york', text: 'New York' });
// 添加多个选项
$list.selectivity('add', [
{ id: 'london', text: 'London' },
{ id: 'paris', text: 'Paris' }
]);每个选项都应该是一个包含 id 和 text 属性的对象。id 通常用于唯一标识选项，text 则是显示给用户的文本。
2. 集成服务器端数据
在实际应用中，下拉列表的选项数据往往来自服务器端。例如，在 ASP.NET MVC 应用程序中，数据可能存储在 ViewBag 或 ViewModel 中。直接将服务器端变量（如 @ViewBag.List）嵌入到 JavaScript 中可能会导致格式问题，因为 JavaScript 无法直接解析服务器端对象。
为了解决这个问题，我们需要在服务器端将数据序列化为 JSON 格式，然后将其输出到页面中，供客户端 JavaScript 使用。
以下是一个在 ASP.NET MVC 视图 (.cshtml 文件) 中处理 ViewBag 数据的示例：
// 假设 ViewBag.List 包含一个字符串列表，例如：
// ViewBag.List = new List<string> { "Berlin", "Rome", "Madrid" };在 .cshtml 文件中的 JavaScript 部分：
<script>
$(document).ready(function() {
// 初始化 Selectivity
const $list = $('#example-2');
$list.selectivity({
items: ['Amsterdam', 'Antwerp'],
multiple: true,
placeholder: 'Type to search a city'
});
// 从服务器端获取并添加新选项
// 使用 @Html.Raw(Json.Encode(ViewBag.List)) 将服务器端列表安全地序列化为 JSON 字符串
// 并由 JavaScript 解析为数组
const serverOptions = @Html.Raw(Json.Encode(ViewBag.List));
// 遍历服务器端数据并添加到 Selectivity
serverOptions.forEach((optionText, index) => {
// 为每个选项创建一个 { id, text } 对象
$list.selectivity('add', { id: optionText, text: optionText });
// 或者，如果服务器端数据已经是 { id, text } 格式，可以直接添加：
// $list.selectivity('add', optionText);
});
});
</script>关键点解释：
- @Html.Raw(Json.Encode(ViewBag.List)): 这是将服务器端 ViewBag.List 对象转换为 JSON 字符串的关键步骤。
- Json.Encode(ViewBag.List): 将 C# 对象序列化为 JSON 格式的字符串。
- @Html.Raw(): 告诉 Razor 引擎输出原始 HTML（这里是 JSON 字符串），而不是对其进行 HTML 编码。这确保了 JavaScript 能够正确解析 JSON。
- serverOptions.forEach(...): 遍历从服务器端获取的 JSON 数组。
- $list.selectivity('add', { id: optionText, text: optionText }): 将每个选项以 Selectivity 期望的 { id, text } 格式添加到下拉列表中。请注意，id 属性对于 Selectivity 内部管理和选择状态非常重要，通常建议为其提供一个唯一值。
完整示例代码
以下是一个包含初始化和动态添加服务器端数据的完整 HTML 结构和 JavaScript 代码示例：
<!DOCTYPE html>
<html>
<head>
<title>Selectivity 动态添加选项</title>
<!-- 引入 jQuery 和 Selectivity 插件的 CSS/JS 文件 -->
<!-- 确保这些路径是正确的，并且你已经安装了 Selectivity -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://arendjr.github.io/selectivity/css/selectivity-jquery.min.css" rel="stylesheet">
<script src="https://arendjr.github.io/selectivity/js/selectivity-jquery.min.js"></script>
</head>
<body>
<main>
<form action="#">
<div class="form-group col-xs-12 col-sm-4" id="example-2"> </div>
</form>
</main>
<script>
// 假设在 ASP.NET MVC 视图中，ViewBag.List 已经被填充
// 例如：ViewBag.List = new List<string> { "Berlin", "Rome", "Madrid" };
// 或者更复杂的对象列表：ViewBag.List = new List<object> { new { id = 1, text = "Berlin" }, new { id = 2, text = "Rome" } };
$(document).ready(function() {
// 1. 初始化 Selectivity 插件
const $selectivityElement = $('#example-2');
$selectivityElement.selectivity({
items: ['Amsterdam', 'Antwerp'], // 初始静态选项
multiple: true,
placeholder: 'Type to search a city'
});
// 2. 从服务器端获取动态数据并添加
// 模拟服务器端数据（在实际应用中，这会是 @Html.Raw(Json.Encode(ViewBag.List))）
// 为了演示，我们直接定义一个 JavaScript 数组
const dynamicOptionsFromServer = ['Berlin', 'Rome', 'Madrid'];
// 如果 ViewBag.List 是一个包含 { id, text } 对象的列表，那么 serverOptions 也会是这样的数组
dynamicOptionsFromServer.forEach((optionValue, index) => {
// 为每个动态选项调用 selectivity 的 'add' 方法
// id 建议是唯一的，这里为了简化直接使用值，实际应用中可能需要更复杂的 id 生成策略
$selectivityElement.selectivity('add', { id: optionValue, text: optionValue });
});
// 示例：添加一个在页面加载后触发的按钮来添加新选项
// <button id="addMoreBtn">添加更多选项</button>
// $('#addMoreBtn').on('click', function() {
// $selectivityElement.selectivity('add', { id: 'tokyo', text: 'Tokyo' });
// });
});
</script>
</body>
</html>注意事项与总结
- Selectivity API 使用： 始终通过 Selectivity 插件提供的方法（如 add、remove 等）来操作下拉列表，而不是直接操作 DOM。
- 数据格式： Selectivity 的 add 方法期望接收一个或多个包含 id 和 text 属性的对象。请确保你的数据符合这个结构。id 属性应具有唯一性。
- 服务器端数据序列化： 当从服务器端（如 ASP.NET MVC 的 ViewBag）获取数据时，务必使用服务器端提供的 JSON 序列化工具（如 Json.Encode）将其转换为 JSON 字符串，并通过 @Html.Raw() 输出，以确保 JavaScript 能够正确解析。
- JavaScript 代码位置： 如果你的 JavaScript 代码需要直接引用服务器端变量（如 @ViewBag.List），那么该 JavaScript 代码必须位于 .cshtml 文件中，而不是单独的 .js 文件中，因为服务器端变量只有在 Razor 视图引擎处理 .cshtml 文件时才会被解析。
- 查阅文档： Selectivity 插件功能强大，遇到更复杂的需求时，建议查阅其官方文档以获取最准确和最新的使用指南。
通过遵循上述指南，你可以有效地在 jQuery Selectivity 插件中动态管理下拉列表的选项，从而构建更加灵活和用户友好的交互界面。
