Как добавить всплывающее окно с изображением в раскрывающийся список выбора HTML

Question

Как добавить маленькое всплывающее окно с изображением в раскрывающийся список выбора HTML? Идея заключалась бы в том, что когда вы перемещаетесь вверх или вниз по элементу списка за элементом (зависание?), Всплывающее окно изменяется (возможно, квадрат 75 пикселов) влево или вправо от выпадающего списка. Это не будет список изображений.

РЕДАКТИРОВАТЬ 1 Вот мой пример исходного кода:

HTML

  <Select id="products" onchange="if (this.selectedIndex) showImg();" style="width:200px">
    <option value="1" selected>prod1</option>    
    <option value="2">prod2</option>
  </Select>

Javascript

function showImg()
{
/*alert("You have selected some of the text!");*/
/*TODO: flyout image based on option/Id"
}

Answer 1

Вы можете попробовать это (используя jQuery):

HTML:

    <table>
    <tr>
        <td>
            <select id="mySelect">
                <option value="" img="">Select an Item!</option>
                <option value="1" img="http://www.dummyimage.com/100x50/3a52f2/fff.png">Item 1</option>
                <option value="2" img="http://www.dummyimage.com/100x50/00ff00/fff.png">Item 2</option>
                <option value="3" img="http://www.dummyimage.com/100x50/00cc99/fff.png">Item 3</option>
                <option value="4" img="http://www.dummyimage.com/100x50/FF5200/fff.png">Item 4</option>
            </select>
        </td>
        <td>
            <img id="myImage" src=""></img>                
        </td>
    </tr>
</table>

JavaScript:

$(function(){
    // when the select changes...
    $( "#mySelect" ).change(function(event) {

        // gets the img attribute (custom attribute) of the selected option
        var image = $(this).find( ":selected" ).attr( "img" );

        // configure the src attribute of the img tag to use the value of the select option img attribute
        $( "#myImage" ).attr( "src", image );
    });
});

JsFiddle: http://jsfiddle.net/davidbuzatto/UzyQj/