如何使用 JavaScript 實作下拉框連動效果？
在開發網頁中，下拉框連動是一種常見的互動效果。它透過選擇一個下拉框中的選項，動態改變另一個下拉框的選項內容，從而實現二者之間的連動。本文將介紹如何使用 JavaScript 實作下拉框連動效果，並附上具體的程式碼範例。
首先，我們需要建立兩個下拉框，並且為它們新增 id 屬性，以便 JavaScript 能夠選取它們。以下是一個簡單的 HTML 結構範例：
#接下來，我們使用 JavaScript 來實作下拉方塊的連動。具體的實作想法如下：
下面是具體的 JavaScript 程式碼範例：
// 获取下拉框元素 const provinceDropdown = document.getElementById('province'); const cityDropdown = document.getElementById('city'); // 给第一个下拉框添加 onchange 事件 provinceDropdown.addEventListener('change', function() { // 获取选择的省份值 const selectedProvince = provinceDropdown.value; // 根据选择的省份值生成相应的城市选项 if (selectedProvince === "1") { // 清空第二个下拉框的选项 cityDropdown.innerHTML = ''; // 添加北京的选项 const option = document.createElement('option'); option.value = '1'; option.text = '北京'; cityDropdown.add(option); } else if (selectedProvince === "2") { // 清空第二个下拉框的选项 cityDropdown.innerHTML = ''; // 添加上海的选项 const option = document.createElement('option'); option.value = '2'; option.text = '上海'; cityDropdown.add(option); } else if (selectedProvince === "3") { // 清空第二个下拉框的选项 cityDropdown.innerHTML = ''; // 添加广东的选项 const option = document.createElement('option'); option.value = '3'; option.text = '广东'; cityDropdown.add(option); } else { // 选择了“请选择省份”，清空第二个下拉框的选项 cityDropdown.innerHTML = ''; } });
最後，我們在瀏覽器中查看效果。選擇第一個下拉方塊中的省份選項，會動態改變第二個下拉方塊中的城市選項。如果選擇了「請選擇省份」選項，則第二個下拉方塊的選項會被清除。
透過以上的步驟，我們就成功地使用 JavaScript 實作了下拉框的連動效果。
總結：
本文介紹如何使用 JavaScript 實作下拉框連動效果，並提供了包含具體程式碼範例的解釋。透過掌握這個方法，你可以為網頁添加更多的互動性和動態性，提升使用者體驗。希望這篇文章對你有幫助！
以上是如何使用 JavaScript 實作下拉框連動效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
