如何從圖像選項清單中進行選擇?

Question

我試圖實現一種設計，其中選擇輸入顯示圖像列表從中挑選。

<select name="choose-image">
    <option value="" disabled selected>Choose your image</option>
    <option value="Smiling"><img src={image} alt="local-avatar" /></option>
    <option value="Sad">Sad</option>
</select>

第二個選項不顯示任何東西，即使它做了，我需要樣式下拉列表，我仍然不確定如何。感謝任何幫助。謝謝。

Answer 1

在HTML中不支援在元素的標籤中直接使用映像。第二個選項不顯示任何內容的原因是

標記的目的是純文本，而不是HTML元素。若要實現想要顯示供選擇的影像清單的設計，可以使用HTML、CSS和JavaScript使用自訂選擇下拉式功能表。有幾個可用的函式庫和插件可以幫助您實現這一點，例如Select2、Chosen或使用CSS和JavaScript的自訂實作。以下是一個如何用圖片建立自訂選擇下拉式選單的範例:

超文本標記語言

#

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

在本例中，您可以將{image_url}替換為您想要顯示的圖像的實際url。當使用者點擊自訂選擇時，它將顯示圖像列表，當使用者選擇圖像時，它將相應地更新所選選項。請記住，這是一個基本範例，您可能需要根據特定需求和樣式首選項調整CSS和JavaScript。此外，對於更複雜的應用程序，可以考慮使用React或Vue.js等前端框架。