如何根據第一個下拉式選單中的選擇自動更新第二個下拉式選單中的選項？

第一個下拉式選單自動更新第二個下拉式選單中的選項

問題陳述：

開發兩個下拉式選單下拉選單，其中第二個下拉選單中的選項取決於第一個下拉選單中所做的選擇。無需使用資料庫即可實現此功能。

解決方案：

初始HTML：

<code class="html"><select id="category">
  <option value="0">None</option>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>

<select id="items">
</select></code>

JavaScript:

<code class="javascript">document.getElementById("category").addEventListener("change", function() {
  var category = this.value;

  var items = document.getElementById("items");
  items.innerHTML = "";

  switch (category) {
    case "1":
      items.innerHTML = '<option value="3">Smartphone</option><option value="8">Charger</option>';
      break;
    case "2":
      items.innerHTML = '<option value="1">Basketball</option><option value="4">Volleyball</option>';
      break;
    default:
      break;
  }
});</code>

定義一個函數來處理第一個下拉式選單的變更事件，並相應地更新第二個下拉式選單中的選項。

說明：

在此範例中，第二個下拉式選單的選項在 JavaScript 函數中硬編碼。當使用者從第一個下拉式選單中選擇類別時，變更事件會觸發 JavaScript 函數。此函數會根據所選類別動態更新第二個下拉式選單中的選項。

以上是如何根據第一個下拉式選單中的選擇自動更新第二個下拉式選單中的選項？的詳細內容。更多資訊請關注PHP中文網其他相關文章！