Cara menggunakan JavaScript untuk melaksanakan fungsi kotak lungsur

Kata Pengantar

Kotak lungsur dalam borang ialah komponen interaktif yang biasa digunakan, yang boleh membantu pengguna memilih pilihan yang diperlukan dengan lebih cepat dan mudah. Artikel ini akan menunjukkan cara menggunakan JavaScript untuk melaksanakan fungsi kotak lungsur.

Struktur HTML

Kita perlu membuat struktur HTML terlebih dahulu, termasuk teg <select> dan berbilang teg <option>. Teg <select> mewakili bekas kotak lungsur, teg <option> mewakili pilihan dalam kotak lungsur, atribut nilai setiap teg <option> mewakili nilai pilihan dan kandungan <option> tag mewakili nama pilihan.

<select id="selectList" onchange="changeOption()">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
  <option value="option4">选项4</option>
</select>

Pelaksanaan JavaScript

Dalam JavaScript, anda boleh mendapatkan nilai pilihan yang sedang dipilih dengan mendapatkan atribut nilai teg <select>. Dengan mendapatkan atribut selectedIndex bagi teg <select>, anda boleh mendapatkan indeks pilihan yang sedang dipilih.

var selectList = document.getElementById("selectList");

var selectedValue = selectList.value; // 获取当前选中选项的值
var selectedIndex = selectList.selectedIndex; // 获取当前选中选项的索引

Untuk memberikan kotak lungsur turun pengalaman yang lebih baik, kami perlu menggunakan JavaScript untuk melaksanakan fungsi penukaran keadaan pilihan bagi kotak lungsur. Anda boleh mensimulasikan kotak lungsur dengan menambahkan acara onclick pada teg <select>, menetapkan atribut saiz teg <select> kepada nilai yang sesuai dan memaparkan semua pilihan. Pada masa yang sama, anda boleh menggunakan gaya CSS untuk mencantikkan gaya kotak lungsur.

function toggleSelectList() {
  var selectList = document.getElementById("selectList");

  if (selectList.size === 1) {
    selectList.style.display = "block";
    selectList.size = selectList.options.length;
  } else {
    selectList.style.display = "none";
    selectList.size = 1;
  }
}

select {
  display: none; /* 隐藏下拉框 */
  width: 100%;
  padding: .5rem;
  font-size: 1rem;
  border: none;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

Mengikat acara

Akhir sekali, kita perlu mengikat kod JavaScript di atas dengan struktur dan acara HTML. Di sini, kami menggunakan fungsi onchange acara dan tersuai toggleSelectList pada teg HTML untuk muncul dan menyembunyikan senarai kotak lungsur.

<select id="selectList" onchange="changeOption()" onclick="toggleSelectList()">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
</select>

function changeOption() {
  var selectList = document.getElementById("selectList");
  var selectedValue = selectList.value;
  console.log(selectedValue);
  toggleSelectList();
}

Kod penuh

Struktur HTML

<select id="selectList" onchange="changeOption()" onclick="toggleSelectList()">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
</select>

Pelaksanaan JavaScript

function toggleSelectList() {
  var selectList = document.getElementById("selectList");

  if (selectList.size === 1) {
    selectList.style.display = "block";
    selectList.size = selectList.options.length;
  } else {
    selectList.style.display = "none";
    selectList.size = 1;
  }
}

function changeOption() {
  var selectList = document.getElementById("selectList");
  var selectedValue = selectList.value;
  console.log(selectedValue);
  toggleSelectList();
}

Gaya CSS

select {
  display: none; /* 隐藏下拉框 */
  width: 100%;
  padding: .5rem;
  font-size: 1rem;
  border: none;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: inherit;
}

Ringkasan

Melaksanakan kotak lungsur melalui JavaScript boleh menjadikan interaksi halaman lebih mesra dan mudah. Melalui kajian artikel ini, tidak sukar untuk mendapati bahawa prinsip JavaScript untuk melaksanakan kotak lungsur turun adalah sangat mudah Dengan mendapatkan nilai atribut tag <select>, anda boleh mendapatkan nilai kotak lungsur dan tukar keadaan yang dipilih Pada masa yang sama, JavaScript diperlukan untuk bekerjasama dan menyembunyikan senarai kotak lungsur.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk melaksanakan fungsi kotak lungsur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!