Bagaimanakah Saya Boleh Mensimulasikan Kotak Semak Di Dalam Menu Pilihan Pilihan Menggunakan HTML, CSS dan JavaScript?

Memasukkan Kotak Semak dalam Pilihan Pilihan

Ketidakupayaan untuk membenamkan kotak pilihan terus ke dalam menu Pilihan Pilihan memberikan cabaran apabila berhadapan dengan reka bentuk yang memerlukan fungsi ini. Walau bagaimanapun, adalah mungkin untuk mencapai sesuatu yang serupa menggunakan gabungan HTML, CSS dan JavaScript.

Pelaksanaan

1. Struktur HTML: Cipta div dengan kelas "berbilang pilih." Dalam div ini, masukkan elemen pilih dan div dengan kelas "overSelect" diposisikan secara mutlak untuk meliputi elemen pilih. Selain itu, buat div lain dengan id "kotak semak" yang akan mengandungi pilihan kotak pilihan.
2. Penggayaan CSS: Gayakan elemen pilih untuk mempunyai teks tebal dan gunakan gaya visual pada "overSelect" div untuk meniru penampilan pilihan pilihan. Tentukan gaya untuk div "kotak semak" untuk mengawal keterlihatan dan reka letaknya.
3. Fungsi JavaScript: Gunakan JavaScript untuk menogol keterlihatan div "kotak pilihan" pada satu klik acara.

Kod

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

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;
  }
}

.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;
}

Penyelesaian ini menyediakan anggaran hampir kefungsian seperti kotak pilihan dalam menu Pilih Pilihan. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa ia menyimpang daripada kelakuan standard elemen Pilihan Pilihan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mensimulasikan Kotak Semak Di Dalam Menu Pilihan Pilihan Menggunakan HTML, CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!