4

Estoy tratando de realizar un simple <select>, que contengan dos imágenes, pero resulta que no es tan sencillo ya que meter una etiqueta <img> dentro de un <option> no es posible, tampoco tolera los <span>. He mirado en el foro en inglés y me he encontrado con esta respuesta la cual me ha llevado a realizar este fiddle para comprobar su funcionalidad.

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

Esta solución no es válida porque era solo para firefox pero dejó de ser valido, sugiere que usemos librerías externas como JQueryUI pero no puedo usar librerías

¿Por qué sucede esto y cómo puedo crearlo para que funcione?

1

2 respuestas 2

4

No es posible aplicar estilos a la etiqueta <option ... /> y es necesario buscar otras alternativas, generalmente, una lista no ordenada <ul ... />

En el html solo cambia el atributo style de cada opción para usarlo como dataset data-style y poder tomarlo desde javascript. Todo el código tiene comentarios para que sepas lo que se hace en cada paso, no funciona completamente como un <select>, pero puede ser buena opción.

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

Intentando que funcione lo más parecido posible a un <select>, agregando otro elemento que contiene el valor actual y hay que hacer clic para mostrar la lista:

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

3

La forma mas rapida sin duda seria usando JQuery sin embargo no es obligatorio, una sugerencia es que no pongas la imagen en el select.

En este codigo puedes observar como se haria con un div donde pones la imagen.

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.