使用jQuery div在下拉式国家/地区列表中不工作的图像

Question

尝试将图像添加到下拉国家/地区列表的左侧

我已经创建了国家列表，并在其下方添加了相应的弹出div，但当试图将图像添加到div中时，它们不起作用，但代码正常工作。

这是到目前为止的代码，我真的很感激花时间阅读我的代码

$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});

<style>
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.UnitedKingdom{ background: #ff0000; }
.UnitedStates{ background: #228B22; }
.EuropeanCountries{ background: #bbb; }
.Afganistan{ background: #aaa; }
.Albania{ background: #eee; }
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div>
<select>
<option>Choose Your Region</option>
<option value="UnitedKingdom" data-image="/icons/icon_calendar.gif">United Kingdom</option>
<option value="UnitedStates">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
United States</option>
<option value="EuropeanCountries">European Countries</option>
<option value="Afganistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
</div>


<div class="UnitedKingdom box"><h1>You have selected <strong>red option</strong> so i am here</div>
<div class="UnitedStates box">You have selected <strong>green option</strong> so i am here</div>
<div class="EuropeanCountries box">You have selected <strong>blue option</strong> so i am here</div>
<div class="Afganistan box">You have selected <strong>green option</strong> so i am here</div>
<div class="Albania box">You have selected <strong>blue option</strong> so i am here</div>

Answer 1

您不能在选项标签中使用image标签。

如果要显示图像，请尝试此库。

https://github.com/marghoobsuleman/ms-Dropdown