首頁 > 後端開發 > php教程 > 如何根據第一個下拉式選單中的選擇自動更新第二個下拉式選單中的選項?

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

Patricia Arquette
發布: 2024-10-21 06:47:30
原創
780 人瀏覽過

How to Auto-Update Options in a Second Drop Down Menu Based on Selections in the First Drop Down Menu?

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

問題陳述:

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

解決方案:

初始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中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板