Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pautan kotak drop-down?

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pautan kotak lungsur?

Dalam membangunkan halaman web, pautan kotak drop-down ialah kesan interaktif yang biasa. Ia secara dinamik menukar kandungan pilihan kotak lungsur lain dengan memilih pilihan dalam satu kotak lungsur, dengan itu mencapai hubungan antara kedua-duanya. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mencapai kesan pautan kotak lungsur dan melampirkan contoh kod khusus.

1. Struktur HTML

Pertama, kita perlu mencipta dua kotak lungsur dan menambah atribut id padanya supaya JavaScript boleh memilihnya. Berikut ialah contoh struktur HTML yang mudah:

<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. Kod JavaScript

Seterusnya, kami menggunakan JavaScript untuk melaksanakan pautan kotak lungsur. Idea pelaksanaan khusus adalah seperti berikut:

• Apabila pilihan kotak lungsur pertama berubah, peristiwa onchange dicetuskan.
• Dalam acara onchange, pilihan kotak drop-down kedua dijana secara dinamik berdasarkan nilai pilihan kotak drop-down pertama.
• Jika anda memilih pilihan "Sila pilih wilayah", kotak lungsur kedua akan mengosongkan pilihan.
• Jika anda memilih wilayah tertentu, pilihan bandar yang sepadan akan dijana dalam kotak lungsur kedua berdasarkan nilai wilayah.

Berikut ialah contoh kod JavaScript khusus:

// 获取下拉框元素
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. Paparan kesan

Akhir sekali, kami melihat kesan dalam penyemak imbas. Memilih pilihan wilayah dalam kotak lungsur pertama akan menukar pilihan bandar secara dinamik dalam kotak lungsur kedua. Jika pilihan "Sila pilih wilayah" dipilih, pilihan dalam kotak lungsur kedua akan dikosongkan.

Melalui langkah di atas, kami telah berjaya menggunakan JavaScript untuk mencapai kesan pautan kotak lungsur.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan JavaScript untuk mencapai kesan pautan kotak lungsur dan memberikan penjelasan dengan contoh kod khusus. Dengan menguasai kaedah ini, anda boleh menambah lebih banyak interaktiviti dan dinamik pada halaman web dan meningkatkan pengalaman pengguna. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pautan kotak drop-down?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!