2

HTMLページに選択/ドロップダウンがあります。これはページに約10回表示される必要があります。そのための簡単なサンプルは次のようになります。

Qn 1：{ドロップダウン}は{TextField}です

Qn 2：{ドロップダウン}は{TextField}です

Qn 3：{ドロップダウン}は{TextField}です

ドロップダウンには、同じで静的なさまざまなオプションが一覧表示されます（文字列の配列-サーバーコンポーネントなし）。

ドロップダウンを一度作成して使用したい。CSSはhtml：selectのデータ要素を持つことができますか？または、選択した要素を埋めるためのJavaScriptコードを作成するにはどうすればよいですか？

4

2 に答える 2

3

これが1つの方法です（jQueryを使用して、すべてのドロップダウンの選択と反復を簡単にします）：

<p>Qn 1: <select class="repeat"></select> is a {TextField}</p>
<p>Qn 2: <select class="repeat"></select> is a {TextField}</p>
<p>Qn 3: <select class="repeat"></select> is a {TextField}​​​​​​​​​​​​​​​​​​&lt;/p>​​​​​​​​​

<script type="text/javascript">
    var optionOpen = "<option>";
    var optionClosed = "</option>"​​​​​​​​​​​​​​​​​;​​
    var selectItems = ["firstItem", "secondItem", "thirdItem"];

    $(".repeat").each(function(){
        for (key in selectItems)
        {
            $(this).append(optionOpen + selectItems[key] + optionClosed);
        }
    });
</script>

デモ

選択オプションをリストとしてフォーマットし、文字列を連結して、ページ間で簡単に変更および再利用できるようにしました。リストにオプションを追加するだけで、 class を使用selectItemsして各<select>タグに追加できますrepeat。フォームで個別に処理する必要がある場合は、それぞれ<select>に異なる属性を指定します。name

于 2012-08-12T04:36:46.307 に答える
2

これを行う方法はたくさんあります。最初に頭に浮かんだのは次のとおりです。

最初の行に「テンプレート」行を指定します。

<ul>
    <li class="template">Qn <span class="qnum">1</span>:
        <select name="sel">
            <option val="0"></option>
            <option val="1">Option 1</option>
            <option val="2">Option 2</option>
            <option val="3">Option 3</option>
        </select>
        is a <input type="text" name="isa">
    </li>
</ul>

次に、その行を必要な回数だけコピーします。

​$(document).ready(function() {
    var $ul = $("ul"),
        $li = $ul.find("li.template"),
        i;

    for (i=2; i <= 10; i++)
        ​$li.clone().appendTo($ul).​find("span.qnum")​​​​​​.text(i);
});

デモ: http://jsfiddle.net/nnnnnn/kJd33/

明らかに、各アイテムを順序なしリストを持つ li 要素にすることを選択しましたが、アイテムに自動的に番号が付けられるように順序付きリストを使用できます。または、実際の要件に多数の列がある場合は、おそらくテーブルがより適切な。

あなたへの宿題：私の答えであなたが理解できなかったものは何でもGoogleで検索するか、jQuery API docoで使用したさまざまなjQueryメソッドを調べてください。

于 2012-08-12T04:39:54.870 に答える