Bootstrap 选择自定义动态选项

Question

我正在使用引导程序选择，当我想使用 Javascript 添加动态选项时遇到问题。该列表始​​终为空。当我切换回使用 HTML 时，选择以下 Javascript 代码完美运行。

HTML：

<select class="selectpicker" data-style="btn-lg btn-list-author" 
id="author-list" data-live-search="true" title="Select Author"></select>

Javascript：

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);
     })
});

Answer 1

使用bootstrap-select，您需要在添加新选项后调用 select-picker 的 refresh 方法。

摘自bootstrap-selectrefresh文档：

.selectpicker('refresh')

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

使用您的原始代码的未经测试的示例：

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');
  });