显示工具提示以及所选项目的图像

Question

当用户在选择菜单中的每个选项上单击鼠标时，我试图显示带有图像的工具提示。

这是我的选择项：

<label for="">Vehicle</label>
<select name="car" id="car" class="ui fluid dropdown">
        <option value="Chevrolet">Chevrolet Impala</option>
        <option value="Mustang">Mustang GT500</option>
        <option value="Hemi Cuda">Hemi Cuda</option>
                    <option value="Tundra">Toyota TUNDRA</option>
 </select>

谁能帮忙？

Answer 1

 $('select option').each(function() { $('.fake-select ul').append("<li data-val='" + this.value + "' data-img='" + this.dataset.img + "'>" + this.innerHTML + "</li>"); }); $('.fake-select').on('click', function() { $(this).addClass('active'); }) $('.fake-select ul').on('mouseenter', 'li', function() { $('.img img').attr('src', this.dataset.img); }) $('.fake-select ul').on('click', 'li', function() { event.stopPropagation() $('.fake-select').removeClass('active'); $('.selected').html(this.dataset.val); }) 

 select { display: none; } ul { list-style-type: none; } .fake-select ul { display: none; } .fake-select.active ul { display: inline-block; } .selected:hover { cursor: pointer; } .fake-select li:hover { background-color: blue; color: #fff; cursor: pointer; } .fake-select:hover .img { outline: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="">Vehicle</label> <select name="car" id="car" class="ui fluid dropdown"> <option value="Chevrolet" data-img="path">Chevrolet Impala</option> <option value="Mustang" data-img="path">Mustang GT500</option> <option value="Hemi Cuda" data-img="path">Hemi Cuda</option> <option value="Tundra" data-img="path">Toyota TUNDRA</option> </select> <div class="fake-select"> <div class="selected">place holder</div> <ul></ul> <div class="img"><img src="" /></div> </div> 

这可以更好地回答您的问题吗？