javascript - 我想在同一个弹出窗口中显示第二个下拉列表

Question

我想在同一个弹出窗口中显示第二个下拉列表(国家列表) .在我选择语言(语言下拉列表)之后，

国家下拉列表显示国家详细信息，这与我在第一个下拉列表(语言下拉列表)中选择的语言有关，但它显示在背景中，我想显示国家(Dorp down list)在用于选择语言的相同弹出窗口。

Note: language drop down should disappear after selecting the value,and Country drop down need to display in same popup

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 之后出现>选择。

引用以下代码:

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

#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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maintext">
  <h2> Main text goes here...</h2>
</div>
<div id="boxes">
  <div id="dialog" class="window">
    <div id="san">
      <section>
        <select id="Rank" class="cs-select cs-skin-elastic">
          <option value="" disabled selected>Choose Language</option>
          <option value="English" data-class="flag-english">English</option>
          <option value="Arabic" data-class="flag-arabic">Arabic</option>
          <option value="French" data-class="flag-french">French</option>

        </select>
      </section>
    </div>
  </div>
  <div style="width: 2478px; font-size: 32pt; color: white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
</div>


<div class="container">
  <div class="English">
    <select class="second-level-select">
      <option value="">-Select Your Country-</option>
      <option value="USA">Usa</option>
      <option value="India">India</option>
    </select>
  </div>

  <div class="Arabic">
    <select class="second-level-select">
      <option value="">-Select Your Country-</option>
      <option value="UAE">UAE</option>
      <option value="Kuwait">Kuwait</option>
    </select>
  </div>

</div>