引導選擇自定義動態選項

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 refresh Documentation

摘錄：

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

這讓數據更改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'); 
    });