suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Wie wähle ich aus einer Liste von Bildoptionen aus?

<p>Ich versuche, ein Design zu implementieren, bei dem die Auswahleingabe eine Liste von Bildern zur Auswahl anzeigt. </p> <pre class="brush:php;toolbar:false;"><select name="choose-image"> <option value="" deaktiviert ausgewählt>Wählen Sie Ihr Bild</option> <option value="Smiling"><img src={image} alt="local-avatar" /></option> <option value="Traurig">Traurig</option> </select></pre> <p>Bei der zweiten Option wird nichts angezeigt, und selbst wenn dies der Fall ist, muss ich das Dropdown-Menü formatieren und bin mir immer noch nicht sicher, wie. Vielen Dank für jede Hilfe. Danke. </p>
P粉974462439P粉974462439527 Tage vor566

Antworte allen(1)Ich werde antworten

  • P粉549986089

    P粉5499860892023-08-02 16:53:24

    在HTML中不支持在元素的标签中直接使用图像。第二个选项不显示任何内容的原因是

    标记的目的是纯文本,而不是HTML元素。要实现想要显示供选择的图像列表的设计,可以使用HTML、CSS和JavaScript使用自定义选择下拉菜单。有几个可用的库和插件可以帮助您实现这一点,例如Select2、Chosen或使用CSS和JavaScript的自定义实现。下面是一个如何用图片创建自定义选择下拉菜单的例子:

    超文本标记语言


    1

    2

    3

    4

    5

    6

    7

    8

    <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:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    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 :

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

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

    Antwort
    0
  • StornierenAntwort