首頁  >  文章  >  web前端  >  如何使用 JavaScript 根據另一個下拉清單中的選擇填入下拉清單?

如何使用 JavaScript 根據另一個下拉清單中的選擇填入下拉清單?

DDD
DDD原創
2024-10-18 13:14:30220瀏覽

How to Populate One Drop-Down List Based on a Selection in Another Using JavaScript?

根據另一個下拉清單中的選擇填充一個下拉清單

使用下拉清單時,通常需要根據一個下拉清單更改內容在另一個選擇上。在 JavaScript 中,無需資料庫查詢即可實現這一點。以下是如何執行此操作的範例:

提供的程式碼分為兩個函數:

  1. configureDropDownLists(ddl1, ddl2):此函數需要兩個個函數參數,它們是將連結的兩個下拉列表。它使用第一個下拉清單 (ddl1) 的值來確定要在第二個下拉清單 (ddl2) 中填入哪些選項。
  2. createOption(ddl, text, value):此輔助函數建立下拉清單的選項元素,並將其新增至下拉清單的選項集合中。

在範例 HTML 程式碼中,我們有兩個下拉清單:ddl1 和 ddl2。當使用者選擇ddl1下拉清單中的選項時,會觸發onchange事件,該事件會呼叫configureDropDownLists()函數。

configureDropDownLists()函數先清除ddl2中的選項,然後根據 ddl1 中選擇的值。例如,如果使用者在 ddl1 中選擇“顏色”,則函數會使用“黑色”、“白色”和“藍色”等顏色選項填入 ddl2。

按照提供的程式碼,您可以輕鬆地根據另一個下拉列表中的選擇填充一個下拉列表,無需複雜的資料庫查詢。

以上是如何使用 JavaScript 根據另一個下拉清單中的選擇填入下拉清單?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn