php - ループするJavaScriptで選択オプションを作成する

for ループを使用して HTML と PHP で選択オプションを作成しました。

コードは次のとおりです

 <select id="room" class="form-control" name="room">
 <?php
     for( $i=1; $i<=10; $i++ )
     {
         echo '<option value="'.$i.'"> Room '.$i.'</option>';
     }
  ?>
  </select>

JavaScript を使用してどのように作成するかを聞きたいのですが?私が作成したオプションの上記のコードの $i<=10 のような制限は、API レスポンスから取得するため、必要です。

ありがとう

考え方は PHP で行ったのと同じですが、エコーする代わりにオプション要素を作成して追加する必要があります。

const TOTAL_OPTIONS = 10;
const select = document.getElementById("room");

for (let i = 1; i <= TOTAL_OPTIONS; i++) {
  const option = document.createElement("option");
  option.value = i;
  option.innerHTML = `Room ${i}`;

  select.appendChild(option);
}

select.addEventListener("change", (e) => console.log(e.target.value));

<select id="room" class="form-control" name="room"></select>

0

これは、HTML テキスト、文字列補間、および .insertAdjacentHTML() を使用して実行できます。

const qty = 10;
const room = document.querySelector("#room");

for (let i = 1; i <= qty; i++) {
  room.insertAdjacentHTML("beforeend", `<option value="${i}">Room ${i}</option>`);
}

<select id="room" class="form-control" name="room"></select>

2020 年 9 月 3 日 3:48 に回答

ユーザー12407908