選択項目のイメージを含むツールチップを表示

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>

が、これは、あなたの質問に答える良いですか？