Bagaimana untuk Mensimulasikan Kotak Semak dalam Menu Pilihan Pilih Menggunakan HTML, CSS dan JavaScript?

Menambahkan Kotak Pilihan pada Menu Pilihan Pilihan

Menggunakan elemen HTML standard yang tersedia, tidak mungkin untuk memasukkan kotak pilihan dalam pilihan menu pilihan. Walau bagaimanapun, dengan bantuan HTML, CSS dan JavaScript, anda boleh mencipta penyelesaian yang meniru fungsi yang serupa.

Melaksanakan Pilihan Pilihan seperti Kotak Semak

Untuk mencapai kefungsian yang diingini, ikuti langkah berikut:

1. Tentukan struktur HTML, termasuk pilihan pilih dan satu set tersembunyi kotak semak.
2. Buat gaya CSS untuk meletakkan dan sembunyikan kotak pilihan.
3. Gunakan JavaScript untuk menogol keterlihatan kotak pilihan apabila pilihan pilihan diklik.

Coretan kod yang disediakan menunjukkan cara membina a komponen:

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div>

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  display: none;
  border: 1px #dadada solid;
}

#checkboxes label {
  display: block;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

var expanded = false;

function showCheckboxes() {
  var checkboxes = document.getElementById("checkboxes");
  if (!expanded) {
    checkboxes.style.display = "block";
    expanded = true;
  } else {
    checkboxes.style.display = "none";
    expanded = false;
  }
}

Atas ialah kandungan terperinci Bagaimana untuk Mensimulasikan Kotak Semak dalam Menu Pilihan Pilih Menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!