Add image in dropdownlist

Question

1) I want to add image with the options in the dropdownList .I have attached screen shot

2) and also i want to select the language first and country which are related to this language should be selected.It is working fine ,the problem is when i select the language the country drop downlist appears but this drop down list disable when i click out of the pop up menu.

Note : The Country List should not disapper until any options are selected from the dropdownlist (Sql Fiddle added)

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

.cs-skin-elastic .cs-options li.flag-france span { background-image: url(../img/English_language_icon.png); } .cs-skin-elastic .cs-options li.flag-brazil span { background-image: url(../img/flag-400.png); } .cs-skin-elastic .cs-options li.flag-safrica span { background-image: url(../img/Arabic-Language-Flag.svg); } .cs-skin-elastic .cs-options li.flag-argentina span { background-image: url(../img/Arabic-Language-Flag.svg); } — Ivin Raj, Feb 22 '17 at 11:34
Don't post code here, just modify it on fiddle which you shared — Hidayt Rahman, Feb 22 '17 at 11:37
am not able to see anything is disabled, is that hide and show issue ? for image icon, this may help you http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list — Hidayt Rahman, Feb 22 '17 at 11:45

score 1 · Accepted Answer · answered Feb 22 '17 at 12:02

For the background image question, a selector like

.cs-select option

does not work in IE, but works in Firefox or Chrome.

A crossbrowser solution may be using jqueryui selectmenu (http://jqueryui.com/selectmenu/#custom_render) or bootstrap.

For the click problem, you need to add the following JS

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

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

See fiddle https://jsfiddle.net/26k2xbna/7/

Add image in dropdownlist

1 Answers1