JS/CSS/HTML: Dropdown option on hover show image

Question

I need to show image after dropdown option hover binded to cursor position. Is it possible? I cant do this and cant look for anything like this.

I need something like this

Answer 1

You could use ul , li elements; set select value to selected li element .data()

$(function() {

  var options = [1, 2, 3, 4, 5];

  $.each(options, function(index, color) {
    // create `li` elements
    $("<li>", {
      append: "\nOption " + options[index] 
              + "<img " 
              + "style=position:absolute;left:175px;opacity:0; " 
              + "src=http://lorempixel.com/100/100/cats?" 
              + Math.random() 
              + "/>",
      // set `data-value`
      data:{"value": options[index]},
      appendTo: "#catsSelect",
      css: {
        listStyle: "none",
        width: "150px",
        height: "24px",
        padding: "4px",
        margin: "1px",
        outline: "1px solid #000",
        fontFamily: "arial"
      },
      on: {
        "mouseenter": function() {
          if (!$(this).is("li:first")) {
            $(this).css("backgroundColor", "skyblue")
            // fade image to opacity 1
            .find("img").stop().fadeTo(150, 1)
          }
        },
        "mouseleave": function() {
          $(this).css("backgroundColor", "transparent")
          // fade image to opacity 0
          .find("img").stop().fadeTo(150, 0)
        }
      }
    })
  });

  $("#catsSelect li:not(:first)")
    .hide()
    .siblings(":first")
    .clone(true)
    .hide()
    .insertAfter("#catsSelect li:first")
    .parent()
    .click(function(e) {
      $("input[type=submit]:disabled").attr("disabled", false);
      if ($(e.target).is("li:first")) {
        $(e.target).closest("li").siblings().toggle()
      } else {
        $(e.target).closest("ul")
          .find(":first")
          .html(function(_, html) {
            var selected = $(e.target).closest("li");
            // set select value to select `li` `data-value`
            $("form").find("option")
              .val(selected.data().value).select();
            return selected.html()
          })
          .trigger("mouseleave")
          .siblings().toggle()
      }
    })
    .closest("form")
    .submit(function() {
      // do stuff at `form` submit
      console.log($(this).serialize())
    })
    .find("option").val($("li:first").data().value)
    .closest(":root").click(function(event) {
      if ($("li:gt(0)").is(":visible") && !$(event.target).is("li")) {
        $("li:gt(0)").toggle()
      }
    })

});

ul {
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
  -webkit-padding-start: 0;
  -moz-padding-start: 0;
  width: 160px;
  height: 32px;
  left: 24px;
  position: relative;
}
ul li:nth-child(1):after {
  position: absolute;
  content: "▼";
  right: 10px;
  top: 10px;
  font-size: 12px;
  opacity: .75;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form>
  <select name="cats" style="display:none">
    <option value=""></option>
  </select>
  <ul id="catsSelect" class="catsSelect"></ul>
  <input type="submit" style="position:relative;left:200px;top:-36px" disabled />
</form>

plnkr http://plnkr.co/edit/j5LBYQCXvN9LhXt25tTb?p=preview

Answer 2

you can try something like this.

var mouseX;
var mouseY;
$(document).mousemove(function (e) {
    mouseX = e.pageX;
    mouseY = e.pageY;
});

$(document).ready(function (event) {
    $('select').on('mouseenter', 'option', function (e) {
        //your logic here
        // this refers to the option so you can do this.value if you need..
            $('.imgdisplay').show();
            $('.imgdisplay').css({ 'top': mouseY, 'left':mouseX}).fadeIn('slow');
        //});
    });
});


<div>
    <select name="optionList" id="optionList" size="5" style="float:left">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <div class="imgdisplay" style="display:none; position:relative; float:left">
    <span>hello</span>
    </div>
</div>

here is the working fiddle

https://jsfiddle.net/yo468eLh/