1

私は次のHTMLを持っています:

<div id='show-label'>
  <select id="comboboxShowLabel">
    <option value="">Hide or show labels?</option>
    <option value="Show Labels">Show Label</option> 
    <option value="Hide Labels">Hide Label</option>
  </select>
</div>

<select></select>実行時に親 div にthe を追加したいala:

     <div id='show-label'>
     </div>

    $("#show-label").html("<select id='comboboxShowLabel'>")
        .append("<option value=''>Hide or show labels?</option>")
        .append("<option value='Show Labels'>Show Label</option>")
        .append("<option value='Hide Labels'>Hide Label</option>")
        .append("</select>");

私には不明な理由ですが、終了タグがページに挿入されていません。

上記のコードと次のようなものを試しました：

.append("<option value='Hide Labels'>Hide Label</option></select>")

これらの要素を単一の .append に「バッチ処理」する際に、ソート要件はありますか? このアプローチは、DOM にロードするときに整形式に見えないので、無視されるのではないかと思っています...

ありがとう！

4

5 に答える 5

2

append()1 つの要素を別の要素に追加するだけです。必要なことは、有効な選択タグを作成することです。その後、それにオプションを追加できます。ドキュメントを参照してください。

$("#show-label").html("<select id='comboboxShowLabel'></select>")
$('#show-label select').append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");
于 2013-08-19T20:53:21.737 に答える
2

代わりにこれを行います：

var $select = $("<select id='comboboxShowLabel'></select>");
$("#show-label").html($select);
$select.append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");

何らかの理由で後で追加する必要がある場合。それ以外の場合は、ブラウザーの効率を高めるために次のようにします (複数ではなく、実際の dom に 1 つの変更を加えます)。

var $select = $("<select id='comboboxShowLabel'></select>")
    .append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");
$("#show-label").html($select);
于 2013-08-19T20:53:38.917 に答える
1

完成した選択を単純に追加してから、それにオプションを追加できます。

$("#show-label").html("<select id='comboboxShowLabel'></select");
$("#comboboxShowLabel")
    .append("<option value=''>Hide or show labels?</option>")
    .append("<option value='Show Labels'>Show Label</option>")
    .append("<option value='Hide Labels'>Hide Label</option>");
于 2013-08-19T20:53:19.393 に答える