如何使用 JavaScript 實作下拉框連動效果？

如何使用 JavaScript 實作下拉框連動效果？

在開發網頁中，下拉框連動是一種常見的互動效果。它透過選擇一個下拉框中的選項，動態改變另一個下拉框的選項內容，從而實現二者之間的連動。本文將介紹如何使用 JavaScript 實作下拉框連動效果，並附上具體的程式碼範例。

1. HTML 結構

首先，我們需要建立兩個下拉框，並且為它們新增 id 屬性，以便 JavaScript 能夠選取它們。以下是一個簡單的 HTML 結構範例：

<select id="province">
  <option value="0">请选择省份</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
</select>

<select id="city">
  <option value="0">请选择城市</option>
</select>

2. JavaScript 程式碼

#接下來，我們使用 JavaScript 來實作下拉方塊的連動。具體的實作想法如下：

• 當第一個下拉方塊的選項改變時，觸發 onchange 事件。
• 在 onchange 事件中，根據第一個下拉方塊的選項值，動態產生第二個下拉方塊的選項。
• 如果選擇的是「請選擇省份」選項，則第二個下拉方塊會清空選項。
• 如果選擇的是具體的省份，根據省份的值，在第二個下拉框中產生對應的城市選項。

下面是具體的 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 = '';
  }
});

3. 效果展示

最後，我們在瀏覽器中查看效果。選擇第一個下拉方塊中的省份選項，會動態改變第二個下拉方塊中的城市選項。如果選擇了「請選擇省份」選項，則第二個下拉方塊的選項會被清除。

透過以上的步驟，我們就成功地使用 JavaScript 實作了下拉框的連動效果。

總結：

本文介紹如何使用 JavaScript 實作下拉框連動效果，並提供了包含具體程式碼範例的解釋。透過掌握這個方法，你可以為網頁添加更多的互動性和動態性，提升使用者體驗。希望這篇文章對你有幫助！

以上是如何使用 JavaScript 實作下拉框連動效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！