如何动态地向 Bootstrap selectpicker 添加选项？

Question

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

我试着使用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尝试向selectpicker添加内容并刷新。

       $(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样式，而是要在现有列表旁边呈现另一个列表，请帮忙/提供解决方案的资源？

- John M

---

第一级“选择地区”对我来说就像垂直选项卡。如果所有国家都在事先已知，为什么用户选择地区后还需要动态“添加”另一个列表呢？ - David Liang

我有大约50个不同层次的树形结构，并希望进行延迟加载以更快地呈现每棵树，而不是一次性转储所有数据。 - John M

看看这个问题，它已经解决了： https://dev59.com/_5fga4cB1Zd3GeqPCurd - Hammad Ahmed khan

澄清需求的问题：1）您的截图显示您可以在组1上进行多项选择。如果这是有意的，那么新的组选项列表将如何工作？选择选项1.2将在右侧生成一个新列表，而选择选项1.3将覆盖由1.2生成的新列表吗？2）您的截图显示组1中的项目也是有效的选择，并且确实被选中。组1中的项目是否作为右侧列表的“全选”功能？ - David Liang

Group 2 将是一个列表，其中包含所有 Group 1 选择项的子元素。选择 1.2 和 1.3 将在 Group 2 列表下添加 1.2 相关的子元素（2.1、2.2）以及 1.3 相关的元素（2.3），添加一个 optgroup 来区分将会很有帮助。如果需要进一步的信息，请告诉我。 - John M

Answer 1

我创建了一个示例，使用数组中的数据创建了动态下拉菜单，其中包含分组选项。希望可以帮助到您。

// Example data Array list
namespace_list = [
    ['test1-c1', 'test2-c1', 'test3-c1', 'test4-c1', 'test5-c1', 'test6-c1'],
    ['test1-c2', 'test2-c2', 'test3-c2', 'test4-c2', 'test5-c2', 'test6-c2']
]


$('#pod_dropdown').selectpicker();

// Selecting selectpicker dropdown
select = document.getElementById('pod_dropdown');

for (let namespace of namespace_list) {

    // Generating group name
    namespace_name = namespace[0].slice(6, 8)+'-title'

    // Creating the optiongroup

    var optgroup = document.createElement('optgroup');
    optgroup.id = namespace_name;
    optgroup.label = namespace_name
    // Appending optiongroup to the dropdown
    select.appendChild(optgroup);

    // Selecting the optiongroup 
    optiongroup = document.getElementById(namespace_name);

    for (let pod of namespace) {

        // Creating the options of the optiongroup 
        var opt = document.createElement('option');
        opt.value = pod;
        opt.innerHTML = pod;
        // Appending the option to the optiongroup
        optiongroup.appendChild(opt);

    }

}
// Refresh the dropdwon menu
$('#pod_dropdown').selectpicker("refresh");



// Getting the value after selecting it in the UI and unselect the dropdown

function filterpod() {
    let pod = $('#pod_dropdown').val().toString();
    console.log(pod)

}

<!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- bootstrap -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- multi select dropdown -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

    <!-- Creatting the dropdown -->
    <select id="pod_dropdown" class="selectpicker" data-style="btn btn-primary btn-sm" multiple data-live-search="true" data-width="auto"></select>
    
    <!-- Calling the function filterpod when hide dropdown after select option -->
    <script type="text/javascript">
        $('#pod_dropdown').on('hide.bs.select', function(e) {filterpod();});
    </script>

- Alex Verdaguer

Answer 2

已通过以下步骤解决：

$("#dropdownid").append('<option value="1" title="1">1</option>');
$("#dropdownid").selectpicker("refresh");
       

- Walk

Answer 3

这可能没有起作用的一个原因是因为在双引号内部使用了双引号或者单引号跨越多行。请尝试使用这个代替：

$(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 事件，以便在某种程度上将两者联系起来。如果这种功能不能满足你的需求，你还可以创建自己的菜单类型。

- myjobistobehappy