我想要一个包含内容 Countryflag +国家/地区名称的下拉菜单(Html选择选项)
为了降低http请求,我希望用1个带有所有标志的图像来实现它,并且只显示其中的一部分。
我用这个条纹 https://www.flag-sprites.com/de/
如果没有带有选项列表的html表单,则其工作方式如下:
<img src="blank.gif" class="flag flag-cz" alt="Czech Republic" />
但
<option><img src="blank.gif" class="flag flag-cz" alt="Czech Republic" /> Czech Republic</option>
是禁止的
如果我这样做的话:
<option class="flag flag-cz">Czech Republic</option>
它没有给出我想要的结果
下面是一个示例,它应该如何: http://find-onlinecontacts.com
答案 0 :(得分:0)
这种方法怎么样?它的行为与选择相同,但您可以轻松地对其进行清理。
$("document").ready(function() {
$(".option").click(function() {
$(".option").slideDown();
});
$(".option:not(.selected)").click(function() {
$(".option:not(.selected)").slideUp();
$(".option.selected").text($(this).text())
$("#selectVal").val($(this).data("value"))
});
});
&#13;
li {
list-style: none
}
.option {
display: none
}
.option:first-child {
display: block
}
.option:not(.selected):hover {
background: red
}
#select {
border: 1px solid black;
width: 100px;
cursor: pointer
}
#select img{width:30px}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="select">
<li class="option selected">--</li>
<li class="option" data-value="0"><img src="http://www.flags.net/images/largeflags/SPAN0002.GIF" alt=""/>Spain</li>
<li class="option" data-value="1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/255px-Flag_of_Portugal.svg.png" alt=""/>Portugal</li>
</ul>
<input id="selectVal" type="hidden" value="" />
&#13;
答案 1 :(得分:-2)
您可以将SELECT标记与Size和name方法一起使用