0

現在、注文フォームを作成しています。ドロップボックスに 1 ～ 8 の値が含まれるオプションがいくつかあります。ドロップボックスごとに、次のコードを使用する必要があります

<select name="mydropdownbox">
                <option value=""> 0 </option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
            </select>

フォームに新しいアイテムを追加するたびに、同じコードを使用する必要があります。ドロップダウンボックスをすべて同じ値のセットを使用する方法があるかどうか疑問に思っていたので、HTMLページに繰り返しコードがたくさんありません。

4

1 に答える 1

0

HTML はスクリプト言語ではないため、HTML だけでは実行できません。繰り返しを避けるためにループを実行することはできません。

次の 2 つのオプションがあります。

  • 完全な HTML を生成するサーバー側言語を使用します。これはサーバー負荷が高くなり、ユーザーは完全な HTML コードをダウンロードする必要があることに注意してください。
  • JavaScript を使用します。これにより、クライアントの負荷が少し高くなり、帯域幅を節約できます。考えられる問題は、一部のユーザーが JS を無効にしている可能性があることです。

JavaScript の方法は、HTML5<template>要素を使用して簡単に実装できます。

JS:

var content = document.getElementById('dropdown-template').content;
for(var i=0; i<10; ++i) {
    document.body.appendChild(document.importNode(content, true));
}

HTML:

<template id="dropdown-template">
    <select name="mydropdownbox">  <!-- ... -->   </select>
</template>

デモ

于 2014-02-12T22:13:00.007 に答える