0

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

4 回答 4

3

您完全可以不用使用 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

IE

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

于 2013-01-03T19:20:03.880 回答
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>'
  );

}
于 2013-01-03T19:32:46.793 回答
1

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

$.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-03T19:26:47.763 回答
0

纯 JavaScript 的效率

示例 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-03T19:52:43.633 回答