How to Create a Dropdown list that options contain both background image and text

Question

HI i am trying to create dropdown list something similar to this

I am trying to create a select list with options . and trying to add the image as a background image of option tag and also add the country name .

My current code is

<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>

when I type the image URL directly in browser is works . but in the option only the country name showing , no image.

I am stuck here for 3 hours now , please help me to solve this . Thanks in advance.

Maybe this is something that can help you? http://stackoverflow.com/questions/4941004/putting-images-with-options-in-a-dropdown-list — Naruto, Jun 09 '16 at 09:50
Only a few browsers would render the code the way you want it to . If you want a cross-browser solution, you should use the ul li method to create a dropdown box with onclick trigger. — SML, Jun 09 '16 at 10:04
http://semantic-ui.com/modules/dropdown.html look at the country dropdown here and inspect the source, maybe it can give you a hint — Anonymous Duck, Jun 09 '16 at 10:12
you can use like this `` instead of background image in option — Manjeet Barnala, Jun 09 '16 at 10:14

score 1 · Accepted Answer · edited Jun 09 '16 at 11:01

By using jquery you can do like this...

<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>

score 0 · Answer 2 · answered Jun 09 '16 at 10:14

0

Here is an amazing plugin that caters what you want take a look on this.

DDSlick

answered Jun 09 '16 at 10:14

Anonymous Duck

2,942
1
12
35

How to Create a Dropdown list that options contain both background image and text

2 Answers2