Question

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

我正在使用每个并追加，但是我已经切换到标准for循环并且当前尝试将我的选项转换为使用追加到使用.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

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

    }

}

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

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

4 个答案: