Question

1）我想使用dropdownList中的选项添加图像。我附加了屏幕截图

2）并且我想首先选择语言，并且应该选择与该语言相关的国家。它工作正常，问题是当我选择语言时出现国家下拉列表但是这个下拉列表禁用当我点击弹出菜单时。

注意：在任何选项出现之前，国家/地区列表不应消失从下拉列表中选择（添加了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。

crossbrowser解决方案可能正在使用jqueryui selectmenu（http://jqueryui.com/selectmenu/#custom_render）或bootstrap。

对于点击问题，您需要添加以下JS

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

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

请参阅小提琴https://jsfiddle.net/26k2xbna/7/

在下拉列表中添加图像

1 个答案: