引导选择器动态添加选项

Question

我正在尝试创建一个下拉列表，当单击第一个列表项时，会打开一个与列表旁边所选项目相关的新项目列表，如下所示：

尝试为此使用 boostrap 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 样式，而是在现有列表旁边呈现另一个列表，有什么帮助/来源可以解决这个问题？

Answer 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如果您想以某种方式将两者链接在一起，您可以进行检测。如果此功能不能按您希望的方式工作，您还可以创建自己类型的菜单。