如何从图像选项列表中进行选择?

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等前端框架。