Я хочу, чтобы отобразить Второе падение downlist в одном всплывающем окне

Question

Я хочу, чтобы отобразить Второй выпадающий список (Country List) в то же всплывающем окне .После я выбора языка (языка выпадающего списка),

В выпадающий список страны показывает данные о стране, которые связаны с языком, который я выбрал при первом выпадающем списке (выпадающем списке), но его отображение в фоновом режиме, я хочу показать страну (ниспадающий список Dorp) в том же всплывающем окне, которое используется для выбора языка.

Примечание: Язык выпадающий должны исчезнуть после выбора значения , и страна выпадающий необходимо отобразить в одном всплывающем окне

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 первого select.

См следующий код:

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

Answer 2

Я не буду записывать все это, но я предлагаю поставить все выпадающие, которые вам нужно, чтобы показать на всплывающее окно в контекстном DIV и сделать видимость скрытой и показать их на выпадающем событии chagne.

$('#Rank').on('change', function() { 
    alert("Dropdown Changed"); 
// here you can make hidden dropdowns visible 
})