如何创建选项包含背景图像和文本的下拉列表

Question

我正在尝试创建类似于此

的下拉列表

我正在尝试使用选项创建选择列表。并尝试将图像添加为选项标记的背景图像，并添加国家/地区名称。

我目前的代码是

<select style="width: 100px;">
   @foreach($available_cities as $city)
      <option style="padding:5px 0;line-height: 20px;background-image:url({{ URL::to('/') }}/assets/img/login-box/hk-flag.png);background-size:30px 30px;">{{ trans($city['area_code']) }}</option>
    @endforeach
   </select>

当我直接在浏览器中输入图像URL时是有效的。但是在选项中只显示国家名称，没有图像。

我现在被困在这里3个小时，请帮我解决这个问题。提前谢谢。

Answer 1

通过使用jquery你可以这样做......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>



<select class="select" style="width:500px;height:35px;display:none;">
    <option data-img="">Select</option>
    <option data-img="https://burotechnischevertalers.nl/wp-content/uploads/2013/09/gb.png">test 1</option>
    <option data-img="https://burotechnischevertalers.nl/wp-content/uploads/2013/09/gb.png">test 2</option>
    <option data-img="https://burotechnischevertalers.nl/wp-content/uploads/2013/09/gb.png">test 3</option>
</select>
<div  style="width:500px;height:35px;border:1px solid gray;" class="display">
</div>
<div class="appenddetails" style="border:1px solid gray;width:500px;display:none;">
<div style="width:500px;height:35px;">Select</div>
</div>
</nav>
<script>
$(document).ready(function(){
    $(".select option").each(function(){
       var img=$(this).attr("data-img");
       var tet=$(this).text();
       if(img!="" && tet!="Select"){
            $(".appenddetails").append('<div style="width:500px;height:35px;"><img src="'+img+'" width="20px" style="max-height:35px;"> '+tet+'</div>');
       }
    });
    $(".display").click(function(){
        $(".appenddetails").show();   
    });
    $(".appenddetails div").click(function(){
        $(".appenddetails").hide(); 
        $(".select").val($(this).text());
        $(".display").html($(this).html());
    });

});
</script>

Answer 2

这是一个非常棒的插件，可以满足您的需求。

DDSlick