Jquery/Javascript - 建立选择菜单的最有效方法？

我正在使用jquery，并尝试调整我的选择菜单生成器运行速度更快。Jquery/Javascript - 建立选择菜单的最有效方法？

我正在使用每个和追加，但是我自从切换到标准的循环，目前试图将我的选项从使用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); 
}

来源

2013-01-03 Code Junkie

只是在这个简化的例子中使用了一个错字。我的实际选择菜单字段都来自我的json对象。 –

您不需要jQuery作为选项，但是如果您确实想要使用它，请在循环外部创建对象并修改循环内的id/value属性。 – vol7ron

您可以完全废除使用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()会给你想要的东西。

来源

2013-01-03 19:20:03 techfoobar

不应该将html编码的值编码为一个html字符串吗？ –

@Techfoobar，纯JavaScript会比使用jquery append运行得更快吗？ –

@LastCoder，html似乎没有工作。 –

您可以更有效地创建内容是这样的：

$.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); 

    } 

}

来源

2013-01-03 19:26:47 StuR

我的理解是append非常慢。我已经在非常极端的情况下有效地填充了多达1000个选择菜单。生产中几乎不会发生100％的机会，而是管理层提出的要求。 –

如果你想保持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>' 
); 

}

来源

2013-01-03 19:32:46 elclanrs

使用一个JavaScript本地数组/堆栈，并在最后连接/连接一次将可能是最有效的。 –

纯效率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); 
}

来源

2013-01-03 19:52:43 MikeM

Jquery/Javascript - 建立选择菜单的最有效方法？

回答

相关问题