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

Question

我正在使用 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);
}

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()会给你你想要的。