Question

我正在使用bootstrap select，当我想使用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 ，您需要在添加新选项后调用选择选择器的刷新方法。

摘自bootstrap-select refresh Documentation：

.selectpicker('refresh')

要以编程方式使用JavaScript更新选择，请先进行操作   select，然后使用refresh方法更新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元素的数据更改，以便它可以重绘它的内容。

工作示例（使用修改后的代码版本）

Working Codepen with some modifications

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

Bootstrap选择自定义动态选项

1 个答案: