国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

在HTML中不支援在元素的標(biāo)籤中直接使用映像。第二個(gè)選項(xiàng)不顯示任何內(nèi)容的原因是

標(biāo)記的目的是純文本，而不是HTML元素。若要實(shí)現(xiàn)想要顯示供選擇的影像清單的設(shè)計(jì)，可以使用HTML、CSS和JavaScript使用自訂選擇下拉式功能表。有幾個(gè)可用的函式庫(kù)和插件可以幫助您實(shí)現(xiàn)這一點(diǎn)，例如Select2、Chosen或使用CSS和JavaScript的自訂實(shí)作。以下是一個(gè)如何用圖片建立自訂選擇下拉式選單的範(fàn)例:

超文本標(biāo)記語(yǔ)言

<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}替換為您想要顯示的圖像的實(shí)際url。當(dāng)使用者點(diǎn)擊自訂選擇時(shí)，它將顯示圖像列表，當(dāng)使用者選擇圖像時(shí)，它將相應(yīng)地更新所選選項(xiàng)。請(qǐng)記住，這是一個(gè)基本範(fàn)例，您可能需要根據(jù)特定需求和樣式首選項(xiàng)調(diào)整CSS和JavaScript。此外，對(duì)於更複雜的應(yīng)用程序，可以考慮使用React或Vue.js等前端框架。