JavaScript で選択要素にオプションを動的に設定する方法

選択オプションを動的に設定する JavaScript 関数

問題:

提供された JavaScript 関数は、12 から 12 までのオプションを作成することを目的としています。 で 100 個ID が「mainSelect」の要素。ただし、現在の関数はオプションを手動で生成するため、効率的ではありません。

解決策:

この問題を解決するには、単純な for ループを利用できます:

<code class="js">const min = 12;
const max = 100;
const select = document.getElementById('mainSelect');

for (let i = min; i <= max; i++) {
  const option = document.createElement('option');
  option.value = i;
  option.textContent = i;
  select.appendChild(option);
}

このアプローチは、 を入力するためのより効率的かつ自動化された方法を提供します。 options.

カスタマイズと再利用性:

関数の使いやすさを向上させるために、最小値と最大値のカスタマイズを許可できます。追加パラメータを受け入れる改良版は次のとおりです。

<code class="js">function populateSelect(selectElementId, min, max) {
  const select = document.getElementById(selectElementId);
  if (!min) { min = 0; }
  if (!max) { max = min + 100; }

  for (let i = min; i <= max; i++) {
    const option = document.createElement('option');
    option.value = i;
    option.textContent = i;
    select.appendChild(option);
  }
}

ログイン後にコピー

この改訂された関数により、任意の

に対して必要なオプションの範囲を指定できるようになります。 Web ページ上の要素。

以上がJavaScript で選択要素にオプションを動的に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。