Bild hinzufügen in Dropdownlist

Question

1) I Bild mit den Optionen in der Dropdown .Ich angebracht Bildschirm haben hinzufügen möchten Schuss

2), und ich möchte auch die Sprache zuerst und Land auszuwählen, die im Zusammenhang mit dieser Sprache sollte ausgewählt werden.Es funktioniert gut, das Problem ist, wenn ich die Sprache die Dropdown-Liste des Landes erscheint, aber diese Dropdown-Liste deaktivieren, wenn ich aus dem Pop-up-Menü klicken.

Hinweis: Die Länderliste sollte nicht disapper, bis alle Optionen aus der Dropdownlist ausgewählt sind (Sql Fiddle hinzugefügt)

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

Für die Frage Hintergrundbild, einen Selektor wie

.cs-select option 

funktioniert nicht im IE, funktioniert aber in Firefox oder Chrome.

Eine Crossbrowser-Lösung kann das jqueryui selectmenu (http://jqueryui.com/selectmenu/#custom_render) oder Bootstrap verwenden.

für das Click-Problem, müssen Sie die folgenden JS

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

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

Geige hinzufügen Siehe https://jsfiddle.net/26k2xbna/7/