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

Show images in select

  • 772

I am trying to make a simple <select>, containing two images, but it turns out that it is not so simple since putting a label <img>inside a <option>is not possible, nor does it tolerate <span>. I have looked in the forum in English and I have found this answer which has led me to make this fiddle to check its functionality.

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

This solution is not valid because it was only for firefox but it is no longer valid, it suggests that we use external libraries like JQueryUI but I can't use libraries

Why is this happening and how can I make it work?

javascript

2 Answers

  1. Best Answer

    It is not possible to apply styles to the label <option ... />and it is necessary to look for other alternatives, usually an unordered list<ul ... />

    In the html, just change the attribute styleof each option to use it as a dataset data-style and be able to take it from javascript. All the code has comments so you know what is done in each step, it doesn't work completely like a <select>, but it can be a good option.

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

    Trying to make it work as close as possible to a <select>, adding another element that contains the current value and needs to be clicked to display the list:

    // 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. The fastest way would certainly be using JQuery, however it is not mandatory, a suggestion is that you do not put the image in the select.

    In this code you can see how it would be done with a div where you put the image.

    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