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

Question

我想在 select 选项中显示每个国家的国旗。
这是我试过的代码：

<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 而不是标志属性（无效 html, ），

用简单的 select 实现它并不容易或不可能，所以使用插件和一些 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 浏览器不支持为选项元素设置背景。更多在options里放图片的方法，参考这个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 显示图像

Display image using attr in HTML select element

html

css

jquery

html-select