引导选择自定义动态选项

使用bootstrap-select您需要在添加新选项后调用选择器的刷新方法。

摘自bootstrap-select refresh Documentation:

.selectpicker('refresh')

要用JavaScript以编程方式更新select，首先要操作选择，然后使用refresh方法更新UI以匹配新的状态。在删除或添加选项时，或者当通过JavaScript禁用/启用select

使用原始代码的未测试示例:

readDataFromGit('https://api.github.com/repos/' + repolink + '/contributors', function(text) {
    data = JSON.parse(text);
    $.each(data, function(i, v) {
        alert(v.login);
        var ul = document.getElementById("author-list");
        var li = document.createElement("option");
        var linkText = document.createTextNode(v.login);
        li.appendChild(linkText);
        ul.appendChild(li);
    })
    // Example call of 'refresh'
    $('.selectpicker').selectpicker('refresh');
});

这让bootstrap-select知道select元素的数据变化，以便它可以重新绘制它的内容。

工作示例(使用修改后的代码版本)

通过一些修改来工作

Codepen代码:

// Had to create some stubs to replace missing code.
var repolink = 'silviomoreto/bootstrap-select';
function readDataFromGit (url, callback) {
  $.get(url, callback);
}
//End of stubs

  readDataFromGit('https://api.github.com/repos/' + repolink + '/contributors', function(text) {
      data = text; // Changed this because my stub is already returning parsed JSON.
      var ul = document.getElementById("author-list"); // moved this out of the loop for a bit of performance improvement (not relevant to the solution.)
      $.each(data, function(i, v) {
          var li = document.createElement("option");
          var linkText = document.createTextNode(v.login);
          li.appendChild(linkText);
          ul.appendChild(li);
      })
      $('.selectpicker').selectpicker('refresh');
  });

这是一个动态下拉菜单，其中包含数据数组中的分组选项:

// 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>