Bolehkah Kotak Semak Dilaksanakan Dalam Pilihan Terpilih?

Melaksanakan Kotak Pilihan dalam Pilihan Pilihan

Soalan:

Adakah ia layak untuk memasukkan kotak pilihan dalam a Pilih menu Pilihan, di mana item individu dalam senarai termasuk kedua-dua kotak semak dan item nama?

Jawapan:

Walaupun tidak mungkin untuk meletakkan kotak semak dalam elemen pilihan, fungsi yang serupa boleh dicapai melalui gabungan HTML, CSS , dan JavaScript.

Penyelesaian:

1. Buat Menu Pilihan Pilihan:

   <select>
       <option>Select an option</option>
   </select>

2. Bina Kotak Semak Senarai:

   <div>

3. Paparkan dan Sembunyikan Senarai Kotak Semak:

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

4. Penggayaan:
   Anda boleh menyesuaikan penampilan kotak berbilang pilihan dengan CSS tersuai. Sebagai contoh, anda boleh menggayakan kotak pilihan dan senarai kotak semak menggunakan CSS berikut:

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

5. Penggunaan:

   • Mengklik pada kotak Pilih Pilihan akan memaparkan senarai kotak pilihan.
   • Pilih kotak pilihan yang dikehendaki, dan ia akan ditunjukkan dalam kotak Pilih Pilihan sebagai nilai dipisahkan koma.

Nota: Ini bukan penyelesaian HTML/CSS standard, tetapi ia menyediakan penyelesaian untuk mencapai kefungsian kotak pilihan dalam menu Pilih Pilihan.

Atas ialah kandungan terperinci Bolehkah Kotak Semak Dilaksanakan Dalam Pilihan Terpilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!