1

私はinnerHTML関数を使用して、HTMLでドロップダウンメニューを動的に作成し、特定のパラメーターを入力しています。これが私のコードです：

for (i in categories) {
    var cat_name = i;
    var cats = categories[cat_name];

    P2_txt.innerHTML += cat_name;       

    if (cats.length > 2) {
        // Drop Down Menu Needed
        P2_txt.innerHTML += '<select>';

        for (var j = 0; j < cats.length; j++) {
            P2_txt.innerHTML += '<option>'+cats[j]+'</option>';
        }

        P2_txt.innerHTML += '</select>';
    }   
}

ただし、実行すると、次のHTMLコードが生成されます。

<select></select>
<option>Value of cats[0]</option>
<option>Value of cats[1]</option>
<option>Value of cats[2]</option>

私が欲しいものの代わりに、これはこれです：

<select>
    <option>Value of cats[0]</option>
    <option>Value of cats[1]</option>
    <option>Value of cats[2]</option>
</select>

何かご意見は？

4

2 に答える 2

7

変更するinnerHTMLと、すぐにDOMに解析されます...したがって、目的の階層から要素selectの後に要素の束を効果的に追加しました。option

だから、あなたはどちらか：

  1. コンボボックスマークアップ全体を作成してから、 innerHTML
  2. または、醜い文字列連結の代わりにDOMメソッドcreateElementなど を使用します。appendChild

var categories = {
    "Domestic": ["Tabby", "Siamese"],
    "Wild": ["Cougar", "Tiger", "Cheetah"]
  },
  cats,
  combo,
  frag = document.createDocumentFragment();

for (var category in categories) {

  cats = categories[category];

  frag.appendChild(document.createTextNode(category));

  combo = document.createElement("select");

  for (var i = 0, ln = cats.length; i < ln; i++) {
    combo.appendChild(document.createElement("option")).textContent = cats[i];
  }

  frag.appendChild(combo);
}

document.body.appendChild(frag);

</ p>

于 2012-11-27T20:15:46.020 に答える
3

完全なHTMLを追加する場合を除いて、と一緒に使用+=しないでください。innerHTML

そのため、文字列を作成してから、次のようvar str = ""; ... str += "...";に追加する必要がありますP2_txt.innerHTML += str;。

于 2012-11-27T20:15:51.150 に答える