Bagaimanakah saya boleh memilih daripada senarai pilihan imej?

Question

Saya cuba melaksanakan reka bentuk di mana input pilih memaparkan senarai imej untuk dipilih.

<select name="choose-image">
    <nilai pilihan="" dilumpuhkan dipilih>Pilih imej anda</option>
    <nilai pilihan="Tersenyum"><img src={image} alt="local-avatar" /></option>
    <nilai pilihan="Sedih">Sedih</option>
</select>

Pilihan kedua tidak memaparkan apa-apa dan walaupun ada, saya perlu menggayakan dropdown dan saya masih tidak pasti caranya. Terima kasih atas sebarang bantuan. terima kasih.

Answer 1

Menggunakan imej secara terus dalam tag elemen tidak disokong dalam HTML. Sebab pilihan kedua tidak memaparkan apa-apa adalah kerana teg

bertujuan untuk menjadi teks biasa, bukan elemen HTML. Untuk melaksanakan reka bentuk yang anda mahu memaparkan senarai imej untuk pemilihan, anda boleh menggunakan menu lungsur pilihan tersuai menggunakan HTML, CSS dan JavaScript. Terdapat beberapa perpustakaan dan pemalam tersedia yang boleh membantu anda mencapai ini, seperti Select2, Chosen atau pelaksanaan tersuai menggunakan CSS dan JavaScript. Berikut ialah contoh cara membuat menu lungsur turun pilihan tersuai dengan imej:

HTML

<div class="custom-select">
  <span class="selected-option">Choose your image</span>
  <ul class="options">
    <li data-value="Smiling"><img src="{image_url}" alt="Smiling" /></li>
    <li data-value="Sad"><img src="{image_url}" alt="Sad" /></li>
    <!-- Add more image options here -->
  </ul>
</div>

CSS:

css
.custom-select {
  position: relative;
  display: inline-block;
}

.selected-option {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
  display: block;
  width: 200px; /* Set the desired width of the select */
}

.options {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none;
  max-height: 200px; /* Set the desired max height of the dropdown */
  overflow-y: auto;
}

.options li {
  padding: 8px;
  cursor: pointer;
}

.options li:hover {
  background-color: #f0f0f0;
}

JavaScript:

const customSelect = document.querySelector('.custom-select');
const selectedOption = customSelect.querySelector('.selected-option');
const optionsList = customSelect.querySelector('.options');

selectedOption.addEventListener('click', () => {
  optionsList.style.display = optionsList.style.display === 'block' ? 'none' : 'block';
});

optionsList.addEventListener('click', (event) => {
  const selectedValue = event.target.getAttribute('data-value');
  selectedOption.textContent = selectedValue;
  optionsList.style.display = 'none';
});

Dalam contoh ini, anda boleh menggantikan {image_url} dengan url sebenar imej yang ingin anda paparkan. Apabila pengguna mengklik pada pilihan tersuai ia akan memaparkan senarai imej dan apabila pengguna memilih imej ia akan mengemas kini pilihan yang dipilih dengan sewajarnya. Perlu diingat bahawa ini adalah contoh asas dan anda mungkin perlu melaraskan CSS dan JavaScript berdasarkan keperluan khusus anda dan pilihan penggayaan. Selain itu, untuk aplikasi yang lebih kompleks, pertimbangkan untuk menggunakan rangka kerja bahagian hadapan seperti React atau Vue.js.