如何在 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);
}</code>

這種方法提供了一種更有效率、更自動化的方式來填入 元素。 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);
  }
}</code>

此修訂後的函數可讓您為任何 指定所需的選項範圍。您網頁上的元素。

以上是如何在 JavaScript 中使用選項動態填入選擇元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！