Product image on select option is possible?

1

I have a budget system but as there are many items with similar description came the need to visualize the image next to the description, the link of the image and the description will be dynamic and will come from a database, I made a code to exemplify the need, but this only works in firefox, remembering I did just to exemplify.

$(document).ready(function(){
    $('#img_1').mouseenter(function(){
       $('#image_1').show();
    });
    $('#img_1').mouseout(function(){
       $('#image_1').hide();
    });
    $('#img_2').mouseenter(function(){
       $('#image_2').show();
    });
    $('#img_2').mouseout(function(){
       $('#image_2').hide();
    });
    $('#img_3').mouseenter(function(){
       $('#image_3').show();
    });
    $('#img_3').mouseout(function(){
       $('#image_3').hide();
    });
})
img{
    max-width: 80px;
    max-height: 80px;
    border: 1px solid rgba(230, 76, 16, 0.5);
    background-color: rgba(230, 76, 16, 0.2);
    box-shadow: 1px 1px 2px orange;
    border-radius: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><labelfor="img">Selecione um ítem: </label>
  <select name="imgs" id="imgs">
                <option value="img_1" id="img_1">Img 1</option>
                <option value="img_2" id="img_2">Img 2</option>
                <option value="img_3" id="img_3">Img 3</option>
            </select>
  <figure>
    <img style="display: none;" src="http://lorempixel.com/100/100/technics/"alt="Imagem 1" id="image_1">
    <img style="display: none;" src="http://lorempixel.com/100/100/technics/"alt="Imagem 2" id="image_2">
    <img style="display: none;" src="http://lorempixel.com/100/100/technics/"alt="Imagem 3" id="image_3">
  </figure>
</div>
    
asked by anonymous 09.08.2017 / 23:05

1 answer

1

Text is only allowed within the option . MDN Documentation:

  

Allowed Content: Text, possibly with escaped characters (as &eacute; ).

With jQuery one option is selectMenu .

    
09.08.2017 / 23:14