Home / Questions / 361942
Accepted
Nicolas Oñate
Asked: 2020-06-04 06:29:04 +0800 CST 2020-06-04 06:29:04 +0800 CST

在选择中显示图像

  • 772

我正在尝试制作一个包含<select>两个图像的简单. 我用英语查看了论坛，我发现了这个答案，这让我制作了这个小提琴来检查它的功能。<img><option><span>

<select class="form-control input-lg" id="exampleFormControlSelect1">
  <option style="background-image:url(https://cdn.countryflags.com/thumbs/portugal/flag-800.png);">
    Português
  </option>
  <option  style="background-image:url(https://cdn.countryflags.com/thumbs/spain/flag-800.png);">
    Español
  </option>
</select>

此解决方案无效，因为它仅适用于 firefox 但不再有效，它建议我们使用 JQueryUI 等外部库，但我不能使用库

为什么会发生这种情况，我怎样才能让它发挥作用？

javascript

2 Answers

  1. Best Answer

    无法将样式应用于标签<option ... />，需要寻找其他替代方案，通常是无序列表<ul ... />

    在 html 中，只需更改style每个选项的属性以将其用作数据集 data-style并能够从 javascript 中获取它。所有的代码都有注释，所以你知道每一步做了什么，它不像 a 那样工作<select>，但它可能是一个不错的选择。

    // Ejecutar hasta que se haya cargado el DOM
window.addEventListener('load', function() {
    // Obtener select
    let sel = document.querySelector('#exampleFormControlSelect1');
    // Crear lista y agregar clase
    let ul = document.createElement('ul');
    ul.className = 'ul-sel';
    // Recorrer opciones del select
    for(let i = 0; i < sel.options.length; i++) {
        // Crear elemento de lista y agregar clase
        let li = document.createElement('li');
        li.className = 'li-option';
        // ¿La opción actual está seleccionada? Aplicar al elemento de lista
        if(sel.options[i].selected) {
            li.classList.add('selected');
        }
        // Agregar contenido y estilo desde opción
        li.innerText = sel.options[i].innerText;
        li.style = sel.options[i].dataset.style;
        // Actualizar valor del select al hacer clic en elemento de lista
        li.addEventListener('click', function() {
            // Remover clase seleccionada de opción anterior
            ul.querySelector('.selected').classList.remove('selected');
            // Seleccionar opción actual
            this.classList.add('selected');
            // Actualizar valor del select
            sel.value = this.innerText;
        });
        // Agregar elemento a lista
        ul.appendChild(li);
    }
    // Agregar lista, justo después del select
    sel.parentNode.insertBefore(ul, sel.nextSibling);
    // Si no queda en la posición deseada, el contenedor debe tener posición relativa
    // sel.parentNode.style.position = 'relative'; // Descomentar esta línea
    // Posicionar lista sobre el select
    ul.style.top = sel.offsetTop + 'px';
    ul.style.left = sel.offsetLeft + 'px';
    // Ocultar select
    sel.style.display = 'none';
});
    .ul-sel {
    list-style-type:none;
    position:absolute;
    min-width:150px;
    background:#eee;
    margin:0;
    padding:0;
    border:1px #ccc solid;
}
.li-option {
    background-size:auto 100%;
    background-repeat:no-repeat;
    margin:2px;
    padding:2px 10px 2px 40px;
    cursor:pointer;
}
.li-option.selected {
    background-color:#ccc;
}
.li-option:hover {
    color:#fff;
    background-color:#aaa;
}
.ul-sel .li-option { display:none; }
.ul-sel .li-option.selected { display:block; }
.ul-sel:hover .li-option { display:block; }
    <p>Agregando texto solo para ver que la lista se posiciona donde debe.</p>

<div>
    Selecciona un idioma:
    <select class="form-control input-lg" id="exampleFormControlSelect1">
        <option data-style="background-image:url(https://cdn.countryflags.com/thumbs/portugal/flag-800.png);">
            Português
        </option>
        <option  data-style="background-image:url(https://cdn.countryflags.com/thumbs/spain/flag-800.png);">
            Español
        </option>
    </select>
</div>

    尝试使其尽可能接近 a 工作<select>，添加另一个包含当前值且需要单击以显示列表的元素：

    // Ejecutar hasta que se haya cargado el DOM
window.addEventListener('load', function() {
    let selUpdate = function(item) {
        // Remover clase seleccionada de opción anterior
        if(ul.querySelector('.selected')) {
            ul.querySelector('.selected').classList.remove('selected');
        }
        // Seleccionar opción actual
        item.classList.add('selected');
        // Actualizar valor del select
        sel.value = item.innerText;
        // Actualizar valor del botón
        btn.innerText = item.innerText;
        btn.style.backgroundImage = item.style.backgroundImage;
        // Ocultar lista
        ul.style.display = 'none';
    }
    // Si no queda en la posición deseada, el contenedor debe tener posición relativa
    // sel.parentNode.style.position = 'relative'; // Descomentar esta línea

    // Obtener select
    let sel = document.querySelector('#exampleFormControlSelect1');
    // Crear botón, asignar clase y agregar después del select
    let btn = document.createElement('span');
    btn.innerText = 'Selecciona idioma';
    btn.className = 'btn-sel';
    sel.parentNode.insertBefore(btn, sel.nextSibling);
    // Posicionar sobre el select
    btn.style.top = sel.offsetTop + 'px';
    btn.style.left = sel.offsetLeft + 'px';
    // Mostrar / ocultar lista al hacer clic en botón
    btn.addEventListener('click', function() {
        ul.style.display = (ul.style.display == 'none') ? 'block' : 'none';
    });

    // Crear lista y agregar clase
    let ul = document.createElement('ul');
    ul.style.width = btn.offsetWidth + 'px';
    ul.className = 'ul-sel';
    // Recorrer opciones del select
    for(let i = 0; i < sel.options.length; i++) {
        // Crear elemento de lista y agregar clase
        let li = document.createElement('li');
        li.className = 'li-option';
        // Agregar contenido y estilo desde opción
        li.innerText = sel.options[i].innerText;
        li.style = sel.options[i].dataset.style;
        // Actualizar valor del select al hacer clic en elemento de lista
        li.addEventListener('click', function() {
            selUpdate(this);
        });
        // ¿La opción actual está seleccionada? Aplicar al elemento de lista
        if(sel.options[i].selected) {
            li.classList.add('selected');
            // Asignar valor inicial al botón
            selUpdate(li);
        }
        // Agregar elemento a lista
        ul.appendChild(li);
    }
    // Agregar lista, justo después del botón
    sel.parentNode.insertBefore(ul, btn.nextSibling);
    // Posicionar lista bajo el botón
    ul.style.top = (btn.offsetTop + btn.offsetHeight) + 'px';
    ul.style.left = btn.offsetLeft + 'px';
    // Ocultar select
    sel.style.display = 'none';
    // Ocultar lista si se hace clic fuera
    document.addEventListener('click', function(e) {
        // Solo si el clc no fue sobre la lista o el botón
        if(e.target != ul && e.target != btn) {
            ul.style.display = 'none';
        }
    });
});
    .btn-sel {
    position:absolute;
    display:block;
    width:150px;
    background:#fff;
    background-size:auto 100%;
    background-repeat:no-repeat;
    margin:0;
    padding:2px 10px 2px 40px;
    border:1px #ccc solid;
    cursor:pointer;
}
.ul-sel {
    list-style-type:none;
    position:absolute;
    background:#eee;
    margin:0;
    padding:0;
    border:1px #ccc solid;
}
.li-option {
    background-size:auto 100%;
    background-repeat:no-repeat;
    margin:2px;
    padding:2px 10px 2px 40px;
    cursor:pointer;
}
.li-option.selected {
    background-color:#ccc;
}
.li-option:hover {
    color:#fff;
    background-color:#aaa;
}
    <p>Agregando texto solo para ver que la lista se posiciona donde debe.</p>

<div>
    Selecciona un idioma:
    <select class="form-control input-lg" id="exampleFormControlSelect1">
        <option data-style="background-image:url(https://cdn.countryflags.com/thumbs/portugal/flag-800.png);">
            Português
        </option>
        <option  data-style="background-image:url(https://cdn.countryflags.com/thumbs/spain/flag-800.png);">
            Español
        </option>
    </select>
</div>

    • 4

  2. 最快的方法当然是使用 JQuery，但这不是强制性的，建议您不要将图像放在选择中。

    在这段代码中，您可以看到如何使用放置图像的 div 来完成。

    function imageChanged(){
 let selector = document.querySelector("#exampleFormControlSelect1");
 let divImage =   document.querySelector("#imageSelected");
 let selectedOption = selector.options[selector.selectedIndex];
 let image = selectedOption.getAttribute("meta-img");

 divImage.innerHTML = "<img src='"+image+"' style='width:100px;'>"
}
imageChanged()
    <div id="imageSelected"></div>
<select class="form-control input-lg" id="exampleFormControlSelect1" onChange="imageChanged()">
  <option meta-img="https://cdn.countryflags.com/thumbs/portugal/flag-800.png">
    Português
  </option>
  <option  meta-img="https://cdn.countryflags.com/thumbs/spain/flag-800.png">
    Español
  </option>
</select>

    • 3