Добавить изображение в DropDownList

Question

1) Я хочу, чтобы добавить изображение с параметрами в DROPDOWNLIST .I прикреплял снимок экрана

2), а также я хочу, чтобы выбрать язык первой и страну, которые являются связанные с этим языком, должны быть выбраны. Он работает нормально, проблема заключается в том, что когда я выбираю язык, который отображается в раскрывающемся списке страны, этот раскрывающийся список отключается, когда я выхожу из всплывающего меню.

Примечание: Список Страна не disapper пока никаких вариантов не , выбранный из DropDownList (Sql Fiddle добавлено)

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

Answer 1

На вопрос фонового изображения, селектор подобные

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