Question

我想要一个包含内容 Countryflag +国家/地区名称的下拉菜单（Html选择选项）

为了降低http请求，我希望用1个带有所有标志的图像来实现它，并且只显示其中的一部分。

如果没有带有选项列表的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

Answer 1

这种方法怎么样？它的行为与选择相同，但您可以轻松地对其进行清理。

＆＃13;

$("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;

Answer 2

您可以将SELECT标记与Size和name方法一起使用

电子逻辑门

2 个答案: