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

【问题标题】：Jquery / Javascript - most efficient way to build a select menu?Jquery / Javascript - 构建选择菜单的最有效方法？
【发布时间】：2013-01-03 19:14:59
【问题描述】：

我正在使用 jquery 并尝试调整我的选择菜单构建器以更快地运行。

我使用 each 和 append，但是我已经切换到标准 for 循环，目前正尝试将我的选项从使用 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);
}

【问题讨论】：

只是这个简化示例中使用的一个错字。我的实际选择菜单字段都来自我的 json 对象。
您不需要 jQuery 作为选项，但如果您确实想使用它，请在循环外创建对象并在循环内修改 id/value 属性。

标签： javascript jquery

【解决方案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() 将返回 option 元素的innerHTML，不包括 option 标签名称。要以跨浏览器的方式执行此操作，您可以将选项包装在外部元素中，并改用其 innerHTML。

即

$(option).wrap('<select/>').parent().html() 会给你你想要的。

【讨论】：

不应该对您要连接成 html 字符串的值进行 html 编码吗？
@Techfoobar，纯 javascript 会比使用 jquery append 运行得更快吗？
@George - 我的意思是像这样的 html 编码
@George - 在您的特定情况下，根本不需要 jQuery 来添加选项。本机总是比任何解释的库代码运行得更快。所以最好（而且更快）只使用原生字符串来形成整个 HTML 并将其一次性附加到 DOM。

【解决方案2】：

如果您想保留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>'
  );

}

【讨论】：

使用 JavaScript 原生数组/堆栈并在最后只加入/连接一次可能是最有效的。

【解决方案3】：

您可以像这样更有效地创建元素：

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

    }

}

【讨论】：

我了解到追加速度非常慢。我在一个非常极端的情况下有效地填充了多达 1000 个选择菜单。生产中永远不会发生的可能性接近 100%，但这是管理层提出的要求。

【解决方案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);
}

【讨论】：