添加图片在下拉列表

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 –

添加图片在下拉列表

回答

相关问题