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

-1

HI我试图创建类似下拉列表中的东西这个如何创建一个下拉列表选项包含两个背景图像和文本

我试图创建选项的选择列表。并尝试添加图像作为选项标签的背景图像，并添加国家名称。

我当前的代码是

<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个小时，请帮我解决这个问题。提前致谢。

来源

2016-06-09 Kanishka Panamaldeniya

也许这是东西，可以帮助你吗？ http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list – Naruto

只有少数浏览器会按照您希望的方式呈现代码。如果您需要跨浏览器解决方案，则应使用ul li方法创建带有onclick触发器的下拉框。 – SML

http://semantic-ui.com/modules/dropdown.html看看这里的国家下拉列表并检查源代码，也许它可以给你一个提示 – Sherlock

通过使用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>

来源

2016-06-09 10:17:43 Mani

这是一个惊人的插件，迎合你想要看看这个。

DDSlick

来源

2016-06-09 10:14:30 Sherlock

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

回答

相关问题