如何动态地将选项添加到 Bootstrap 选择器？
Posted
技术标签:
【中文标题】如何动态地将选项添加到 Bootstrap 选择器？【英文标题】：How can I add options to a Bootstrap selectpicker dynamically? 【发布时间】：2021-02-19 14:58:09 【问题描述】：我正在尝试创建一个下拉列表，当单击第一个列表项时，会在列表旁边打开一个与所选项目相关的新列表，如下所示：
我尝试为此使用 Bootstrap selectpicker，然后单击尝试将另一个列表添加为：
<select class="selectpicker" data-live-search="true">
<optgroup label="Select Group 1">
<option value="1">Option 1.1</option>
<option value="2">Option 1.2</option>
<option value="3">Option 1.3</option>
</optgroup>
</select>
并在 jquery 中单击尝试附加和刷新选择器。
$(event.target)
.append("<optgroup label="Select Group 2">
<option value="4">Option 2.1</option>
<option value="5">Option 2.2</option>
<option value="6">Option 2.3</option>
</optgroup>");
$(dropdowmElem).selectpicker("refresh");
但我不确定如何实现类似的布局。我不是在寻找类似的 CSS 样式，而是在现有列表旁边呈现另一个列表，有什么帮助/资源来解决这个问题吗？
【问题讨论】：
第一级“选择区域”对我来说是垂直标签。如果所有国家/地区都是事先知道的，为什么需要在用户选择区域后动态“添加”另一个列表？ 我得到了大约 50 种不同的层次结构树，并希望延迟加载每棵树以更快地渲染，而不是一次性转储所有数据。 看看这个问题在那里解决了：***.com/questions/37756959/… 澄清您的要求的问题： 1) 您的屏幕截图显示您可以在组 1 中选择多个。如果是这样，新的组项目列表将如何工作？选择选项 1.2 会在右侧生成一个新列表，选择选项 1.3 会覆盖 1.2 生成的新列表？ 2）您的屏幕截图显示第 1 组项目也是有效的选择，并且确实被选中。第 1 组中的项目是否作为右侧列表的“全选”？ Group 2 将是一个列表，它附加了所有 Group 1 选择项的子元素。选择 1.2 和 1.3 将在 Group 2 列表下有 1.2 相关子元素（2.1, 2.2）加上 1.3 相关元素（2.3），添加一个 optgroup 来区分也会有帮助。如果还需要任何信息，请告诉我。 【参考方案1】：这可能不起作用的一个原因是您可以在双引号中使用双引号或在多行中使用双引号。尝试改用这个：
$(event.target)
.append(`<optgroup label="Select Group 2">
<option value="4">Option 2.1</option>
<option value="5">Option 2.2</option>
<option value="6">Option 2.3</option>
</optgroup>`);
$(dropdowmElem).selectpicker("refresh");
您也无法检测到<option> 上的鼠标悬停。您可以检测到:hover，以防万一您想以某种方式将两者链接在一起。如果此功能无法按您希望的方式工作，您也可以创建自己的菜单类型。
【讨论】：
【参考方案2】：为什么不在多级下拉菜单中实现这一点
$(document).ready(function()
$('.dropdown-submenu a.test').on("click", function(e)
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
);
);.dropdown-submenu
position: relative;
.dropdown-submenu .dropdown-menu
top: 0;
left: 100%;
margin-top: -1px;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">3rd level dropdown</a></li>
<li><a href="#">3rd level dropdown</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
</script>
</body>
</html>将菜单项替换为optgroup
【讨论】：
以上是关于如何动态地将选项添加到 Bootstrap 选择器？的主要内容，如果未能解决你的问题，请参考以下文章