顯示與選定項目的圖像的工具提示

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>

這是回答你的問題好？