Question

我想在选择的选项中显示每个国家/地区的旗帜这是我试过的代码：

<select id="slcCountry">
    <option flag="https://restcountries.eu/data/afg.svg">AFG</option>
    <option flag="https://restcountries.eu/data/ala.svg">ALA</option>
    <option flag="https://restcountries.eu/data/alb.svg">ALB</option>
</select>

这是显示图像的CSS

select option {
    background-image: url(attr(flag));
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px 6px;
    width: 32px;
    height: 34px;
}

如何在此处显示列表的每个图像（标记）。请帮帮我。

Answer 1

首先，对于自定义属性使用html5 data attribute而不是flag attr（无效的html，）

使用简单的选择实现这一点并不容易或不可能，因此可以使用插件和一些css / js技巧，

我使用了bootstrap select，使用了bootstrap 3和jquery，结果如下：

见下面的代码：

$(function() {

  $('.selectpicker').selectpicker({
    size: 4
  });
  // selector for generated dropdonw button
  var $button = $("button[data-id='slcCountry']");
  //generate img for each selectpicker option 
  $("#slcCountry option").each(function(i, el) {
    var flag = $(el).data("flag");
    if (flag)
      $button.next().find("li[data-original-index=" + i + "] a").css("background-image", "url(" + flag + ")");

  });


  //cahnge event to assign icon to selected elmen t
  $("#slcCountry").on("change", function(e) {
    var flag = $("#slcCountry option:selected").data("flag");
    if (flag)
      $button.find(".filter-option").css("background-image", "url(" + flag + ")");
    else
      $button.find(".filter-option").css("background-image", "url('')")
  });

  $('.selectpicker').trigger('change');

});

#img {
  width: 200px;
  height: 150px;
}

.dropdown-menu ul li a,
button[data-id='slcCountry'] .filter-option {
  background-size: 25px;
  background-position-y: center;
  background-repeat: no-repeat;
  background-position-x: 95%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<select class="selectpicker" id="slcCountry">

    <option data-flag="https://restcountries.eu/data/afg.svg">AFG</option>
    <option data-flag="https://restcountries.eu/data/dza.svg">DZA</option>
    <option data-flag="https://restcountries.eu/data/alb.svg">ALB</option>
</select>

Answer 2

这是我使用jquery的解决方案：

请注意，代码段可能无效，因为：

主要webkit浏览器不支持为option元素设置背景。有关将图像放入选项的更多方法，请参阅此Q/A：
您的图片托管在https上。

$(document).ready(function(){
  $("option[flag]").each(function(){
    $(this).css("background-image","url('"+ $(this).attr("flag") +"')");
  })

})

select option {
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 10px 6px;
    width: 32px;
    height: 34px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="slcCountry">
    <option flag="https://restcountries.eu/data/afg.svg">AFG</option>
    <option flag="https://restcountries.eu/data/ala.svg">ALA</option>
    <option flag="https://restcountries.eu/data/alb.svg">ALB</option>
</select>

在HTML select元素中使用attr显示图像

2 个答案: