Jquery/Javascript - 建立選擇菜單的最有效方法？

Question

我正在使用jquery，並嘗試調整我的選擇菜單生成器運行速度更快。

我正在使用每個和追加，但是我自從切換到標準的循環，目前試圖將我的選項從使用append轉換爲使用.html（）附加到我的選擇選項的串聯字符串。我似乎不知所措，試圖將我的var選項對象轉換回html字符串。有人能告訴我我可能做錯了什麼。

$.selectMenuBuilder = function(json) { 
    var myselect = $("#myselect");  
    var list = "<option value=\"\">> Select Account Number</option>"; 

    var l= json.funding.length; 
    for(var i=0;i<l; i++) { 
     var funding = json.funding[i];  
     var option = $("<option value=\"" + funding.id + "\">" + funding.accountNumber + "</option>") 

     if(someLogic) { 
      option.attr("selected", "selected"); 
     } 

     //Having trouble here converting option object back to html. 
     list += option.html(); 
    } 

    list += "<option value=\"addnew\">+ New Account Number</option>"; 

    myselect .html(list); 
} 

Answer 1

您可以完全廢除使用jQuery用於創建option元素（除非那裏有你使用它的一些其他數不清的原因）。取而代之的

var option = $("<option value=\"" + funding.id + "\">" + funding.accountNumber + "</option>") 
if(someLogic) option.attr("selected", "selected"); 

即你可以這樣做：

list += "<option value=\"" + funding.id + "\" "+ (someLogic?'selected':'') +">" + funding.accountNumber + "</option>" 

---

其次，$(option).html()將返回的選項件innerHTML，不包括選項標籤名 。爲了以跨瀏覽器的方式進行此操作，可以將選項封裝在外部元素中，並使用它的innerHTML。

即

$(option).wrap('<select/>').parent().html()會給你想要的東西。

Answer 2

您可以更有效地創建內容是這樣的：

$.selectMenuBuilder = function (json) { 
    var myselect = $("#myselect"); 

    var l = json.funding.length; 
    for (var i = 0; i < l; i++) { 
     var funding = json.funding[i]; 

     var opt = $("<option/>", { 
      value: funding.id, 
      html: funding.accountNumber, 
      selected: somelogic ? true : false //Pre-select option 
     }); 

     myselect.append(opt); 

    } 

} 

Answer 3

如果你想保持for循環，但想要的東西，看起來有點清潔，試試這個：

function menuBuilder(json) { 

    var list = [], 
     $select = $('#myselect'), 
     i = 0, 
     l = json.funding.length, 
     funding; 

    for (; i < l; i++) { 
    funding = json.funding[ i ]; 
    list.push(
     '<option '+ somelogic ? 'selected' : ''+' value='+ funding.id +'>'+ 
     funding.accountNumber + 
     '</option>' 
    ); 
    } 

    $select.append(
    '<option>Select Account Number</option>'+ 
    list.join('') + 
    '<option value="addnew">New Account Number</option>' 
); 

} 

Answer 4

純效率JavaScript

example jsfiddle

selectMenuBuilder = function(json) { 
    var myselect = document.getElementById("myselect"), 
     listItem = document.createElement("option"), 
     l = json.funding.length, 
     someLogic = false; // placeholder 

    listItem.innerText = "> Select Account Number"; 
    myselect.appendChild(listItem); 

    for (var i = 0; i < l; i++) { 
     var funding = json.funding[i]; 
     var listItem = document.createElement("option"); 

     if (someLogic) { 
      listItem.setAttribute("checked", "checked"); 
     } 
     listItem.setAttribute("value", funding.id); 
     listItem.innerText = funding.accountNumber; 

     myselect.appendChild(listItem); 
    } 

    listItem = document.createElement("option") 
    listItem.setAttribute("value", "addnew"); 
    listItem.innerText = "+ New Account Number"; 
    myselect.appendChild(listItem); 
}