0

I want to display image inside drop down option like below image, Can anyone suggest me how can i achieve this?

enter image description here

Any help would be appreciate.

Thanks In Advance..!

1

Html Code

<div class="drop-down">
    <select name="options">
        <option class="en" value="en" 
       style="background-image:url('images/en.png');">English</option>
        <option class="fr" value="fr"
       style="background-image:url('images/fr.png');">French</option>
        <option class="nl" value="nl"
       style="background-image:url('images/nl.png');">Nederlands</option>
    </select>
</div> 

Jquery

jQuery().ready(function() {  
    /* Custom select design */    
    jQuery('.drop-down').append('<div class="button"></div>');    
    jQuery('.drop-down').append('<ul class="select-list"></ul>');    
    jQuery('.drop-down select option').each(function() {  
        var bg = jQuery(this).css('background-image');    
        jQuery('.select-list').append('<li class="clsAnchor"><span value="' + jQuery(this).val() + '" class="' + jQuery(this).attr('class') + '" style=background-image:' + bg + '>' + jQuery(this).text() + '</span></li>');   
    });    
    jQuery('.drop-down .button').html('<span style=background-image:' + jQuery('.drop-down select').find(':selected').css('background-image') + '>' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');   
    jQuery('.drop-down ul li').each(function() {   
        if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {  
            jQuery(this).addClass('active');       
        }      
    });     
    jQuery('.drop-down .select-list span').on('click', function()
    {          
        var dd_text = jQuery(this).text();  
        var dd_img = jQuery(this).css('background-image'); 
        var dd_val = jQuery(this).attr('value');   
        jQuery('.drop-down .button').html('<span style=background-image:' + dd_img + '>' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');      
        jQuery('.drop-down .select-list span').parent().removeClass('active');    
        jQuery(this).parent().addClass('active');     
        $('.drop-down select[name=options]').val( dd_val ); 
        $('.drop-down .select-list li').slideUp();     
    });       
    jQuery('.drop-down .button').on('click','a.select-list-link', function()
    {      
        jQuery('.drop-down ul li').slideToggle();  
    });     
    /* End */       
});

Css

 .drop-down { 
    position: relative;  
    display: inline-block;    
    width: auto;       
    margin-top: 0;   
    font-family: verdana;    
 }      
 .drop-down select {   
    display: none;    
 }      
 .drop-down .select-list {   
    position: absolute;     
    top: 0;      
    left: 0;     
    z-index: 1;    
    margin-top: 40px;    
    padding: 0;         
    background-color: #595959;      
 }      
 .drop-down .select-list li {   
    display: none;      
 }    
 .drop-down .select-list li span {  
    display: inline-block;      
    min-height: 40px;        
    min-width: 280px;      
    width: 100%;        
    padding: 5px 15px 5px 35px;     
    background-color: #595959;     
    background-position: left 10px center;   
    background-repeat: no-repeat;       
    font-size: 16px;       
    text-align: left;       
    color: #FFF;        
    opacity: 0.7;      
    box-sizing: border-box;     
 }     
 .drop-down .select-list li span:hover,  
 .drop-down .select-list li span:focus {     
    opacity: 1;     
 }

Result

Result

Refrence: https://www.quora.com/How-can-I-insert-images-to-select-dropdown-options

  • i have tried it, it works for me. Do you share your screenshot, what error it gives you? – abdus Apr 18 at 9:53
  • Let me try I will notify you, if answer helpful I will accept and also upvote – Sanjay Gohil Apr 18 at 9:54
  • sure, let me know if it works. – abdus Apr 18 at 10:31
  • After spending the hour I found that your solution is work for me..! Thanks +1 for you – Sanjay Gohil Apr 19 at 7:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.