Insert image in select option

0

I have this function, what I try to do is add an image to an option but there is no way.

To say that the value of the fields introduces me well in the option select but the photo does not appear. The page does not give any errors, I simply display the select and I see all the fields but not the image.

The reason for wanting to do this is that depending on whether a field is active or not, I want the select to have an icon telling the user that this person is active.

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>");
                //}
            });
        }
    });
    
asked by Lorenzo Martín 06.11.2017 в 21:24
source

1 answer

1

I do not understand what you want to do by putting an image in a select, by itself it seems to me that you can not. However, I bring you an alternative to give more emphasis to each of the options of the select using icons .

This requires using Bootstrap and an additional Boostrap library called boostratp-select , which gives you many features for your select. Here is a simple example of its functionality. I hope it helps you. Bootstrap has a series of icons within the framework, here is the complete list. If you want to change them icons you only need to add their name in the data-icon="glyphicon-heart" part of said 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>
    
answered by 07.11.2017 / 00:45
source