0

私はjqueryを使用していて、選択メニュービルダーを調整してはるかに高速に実行しようとしています。

それぞれとappendを使用していましたが、その後、標準のforループに切り替えて、現在、appendの使用から.html（）を使用してselectオプションに追加された連結文字列にオプションを変換しようとしています。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()を返します。クロスブラウザ方式でこれを行うには、オプションを外側の要素でラップし、代わりにその要素を使用できます。innerHTMLinnerHTML

すなわち

$(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 に答える