0

Tengo esta función, lo que intento hacer es añadir una imagen a un option pero no hay manera.

Decir que el valor de los campos me lo introduce bien en el select opcion pero la foto no aparece. No da ningún error la pagina, simplemente despliego el select y veo todos los campos pero no la imagen.

El motivo de querer hacer esto, es que dependiendo de si un campo está activo o no, quiero que el select tenga un icono avisando al usuario de que esa persona esta activa.

var ruta = "php/bombillaV.png";


    $.ajax ({
        url: "/loren/php/colab_x_usuario_token.php",
        type: "POST",
        success: function(data){
            objJson=JSON.parse(data);
            $.each(objJson, function(i, item) {
                //if (objJson[i].estado_col == '1'){
                    $('#idColaboradorCT').append("<option style=background:url("+ruta+") no-repeat center left; padding-left:5px; value= "+objJson[i].id+" >"+" "+objJson[i].name + " " + objJson[i].apellidos+"</option>");
                //}
            });
        }
    });
2
  • 1
    La mejor opción será recurrir a una librería de terceros como Bootstrap, o bien jQuery UI u otras... ya que los select son tratados de formas distintas según el navegador, entonces lo que en un cliente funciona puede que en otro no, o funcione diferente... la cuestión de la compatibilidad es importante en estos casos.
    – A. Cedano
    Commented el 6 nov. 2017 a las 22:24
  • Aparte de lo mencionado por A. Cedano, recuerda que todos los atributos html deben estar delimitados, ya sea por comillas dobles o sencillas para garantizar que se interpreten y apliquen correctamente. Edición: Cambia los tags de tu pregunta, porque nada tienen que ver con PHP, sino con Javascript y CSS.
    – Triby
    Commented el 7 nov. 2017 a las 0:07

1 respuesta 1

1

No entiendo qué es lo que quieres realizar poniendo una imagen en un select, por sí sólo me parece que no se puede. Sin embargo, te traigo una alternativa para darle más énfasis a cada uno de las opciones del select utilizando íconos.

Para ello es necesario utilizar Bootstrap y una librería adicional de Boostrap llamada boostratp-select, la cual te da muchas funcionalidades para tu select. Aquí te dejo un ejemplo sencillo de su funcionalidad. Espero te ayude. Bootstrap cuenta con una serie de íconos dentro del framework, aquí está la lista completa. Si quieres cambiarlos iconos sólo es necesario agregar su nombre en la parte data-icon="glyphicon-heart" de dicha option.

<!DOCTYPE html>
<html lang="es">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
</head>

<body>
  <center>
    <select class="selectpicker">
      <option data-icon="glyphicon-heart">Corazon</option>
      <option data-icon="glyphicon-usd">Dinero</option>
      <option data-icon="glyphicon-user">Usuario</option>
      <option data-icon="glyphicon-lamp" selected>Lampara</option>
    </select>
  </center>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
</html>

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.