Question

我想在同一个弹出窗口中显示第二个下拉列表（Country List）。选择语言（语言下拉列表）后，

国家/地区下拉列表显示国家/地区详细信息，这些信息与我在第一个下拉列表中选择的语言（语言下拉列表）相关，但是它在后台显示，我想显示国家/地区（Dorp下拉列表）用于选择语言的弹出窗口。

注意：选择后语言下拉列表会消失 value和Country下拉需要显示在同一个弹出窗口中

Jquery的

$(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().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');


});

DEMO HERE

Answer 1

您已将第二个select option的内容附加到模式div中，以便它显示在第一个change的{{1}}之后。

参考以下代码：

＆＃13;

select

＆＃13;

$(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');
});

＆＃13;

#mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9000;
  background-color: #26262c;
  display: none;
}

#boxes .window {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 850px;
  display: none;
  z-index: 9999;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
}

#boxes #dialog {
  width: 450px;
  height: auto;
  padding: 10px 10px 10px 10px;
  background-color: #ffffff;
  font-size: 15pt;
}

.agree:hover {
  background-color: #D1D1D1;
}

.popupoption:hover {
  background-color: #D1D1D1;
  color: green;
}

.popupoption2:hover {
  color: red;
}

＆＃13;

Answer 2

我不会记下整件事情，但我会建议将弹出式窗口中弹出窗口显示的所有下拉列表隐藏起来，并将其显示在dropdown chagne事件中。

    fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function (img) {
        img1 = img;
    img.set({
        width: originalWidth,
        height: originalHeight,
        evented: true,
        selectable: false
    });

    lens = fabric.util.object.clone(img);
    lens.set({
        width: scale * originalWidth,
        height: scale * originalHeight,
        clipTo: function (ctx) {
            ctx.arc(-this.left + x - this.width / 2, -this.top + y - this.height / 2, radius, 0, Math.PI * 2, true);
        }
    });

    canvas.add(img, lens);
    canvas.centerObject(img);//*******issue here****
});

canvas.on('mouse:move', function (e) {
    x = e.e.layerX;
    y = e.e.layerY;
    lens.set('left', -(scale - 1) * x);
    lens.set('top', -(scale - 1) * y);
    canvas.renderAll();
});

我想在同一个弹出窗口中显示Second Drop downlist

2 个答案: