添加圖片在下拉列表

1）我想與在下拉列表。我的選項添加圖片附上屏幕截圖添加圖片在下拉列表

2），也是我想首先選擇語言和國家，是應該選擇與這種語言有關。它工作正常，問題是當我選擇語言的國家下拉列表出現，但這個下拉列表禁用當我點擊彈出菜單。

注：國家清單不應即消失，直到任何選項從下拉列表中選擇（SQL小提琴加）

$(document).ready(function() { 

    var id = '#dialog'; 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set heigth and width to mask to fill up the whole screen 
    $('#mask').css({ 
    'width': maskWidth, 
    'height': maskHeight 
    }); 

    //transition effect  
    $('#mask').fadeIn(500); 
    $('#mask').fadeTo("slow", 0.9); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    //Set the popup window to center 
    $(id).css('top', winH/2 - $(id).height()/2); 
    $(id).css('left', winW/2 - $(id).width()/2); 

    //transition effect 
    $(id).fadeIn(2000); 

    //if close button is clicked 
    $('.window .close').click(function(e) { 
    //Cancel the link behavior 
    e.preventDefault(); 

    $('#mask').hide(); 
    $('.window').hide(); 
    }); 

    //if mask is clicked 
    $('#mask').click(function() { 
    var val = $(".cs-select option:selected").text(); 
    if (val == 'Choose Language') { 
     return; 
    } 
    $(this).hide(); 
    $('.window').hide(); 
    }); 

    $(document).click(function() { 
    if (!$(".cs-select ").is(":focus")) { 
     $('#dialog').css({ 
     'height': 23 
     }); 
    } else { 
     var height = 17; 
     $('.cs-select option').each(function(item) { 
     height = height + 17; 
     }) 
     if ($('#dialog').height() < 25) { 
     $('#dialog').css({ 
      'height': height 
     }); 
     } else { 
     $('#dialog').css({ 
      'height': 23 
     }); 
     } 
    } 
    }); 

}); 


/*select your country*/ 

$(document).ready(function() { 

    $('#Rank').bind('change', function() { 
    var elements = $($('div.container').children()); 
    elements.hide(); // hide all the elements 
    var value = $(this).val(); 

    if (value && value.length) { // if somethings' selected 
     $("#dialog").html($(elements.filter('.' + value)).html()); 
    } 
    }).trigger('change'); 
});

DEMO HERE

來源

2017-02-22 Ivin Raj

你嘗試過與背景圖像？ –

等候先生@HidaytRahman我會分享我的代碼 –

.cs-skin-elastic .cs-options li.flag-france span { \t background-image：url（../ img/English_language_icon.png）; } .cs-skin-elastic .cs-options li.flag-brazil span { \t background-image：url（../ img/flag-400.png）; } .cs-skin-elastic .cs-options li.flag-safrica span { \t background-image：url（../ img/Arabic-Language-Flag.svg）; } .cs-skin-elastic .cs-options li.flag-argentina span { \t background-image：url（../ img/Arabic-Language-Flag.svg）; } –

對於背景圖片的問題，選擇像

.cs-select option

在IE中不起作用，但適用於Firefox或Chrome。

甲跨瀏覽溶液可以使用jQueryUI的selectmenu（http://jqueryui.com/selectmenu/#custom_render）或自舉。

對於點擊的問題，你需要添加下面的JS

$('#mask').click(function() { 
    ....  
    var val2 = $("#dialog .second-level-select option:selected").text(); 

    if (val2 == '-Select Your Country-') { 
     return; 
    } 
    ....

見小提琴https://jsfiddle.net/26k2xbna/7/

來源

2017-02-22 12:02:35 Massimo

非常感謝它的工作正常.... @ Massimo –

添加圖片在下拉列表

回答

相關問題