2017-02-21 10 views
0

にdownlist表示したい、私は(言語はドロップダウンリスト)私は、言語を選択し、同じポップアップウィンドウ .Afterにリスト(国のリスト)をセカンドドロップダウン表示するセカンドドロップは、同じポップアップウィンドウ

国のドロップダウンリストには、最初のドロップダウン(言語ドロップダウン)で選択した言語に関連する国の詳細が表示されますが、その表示はバックワードで、同じポップアップで国(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

答えて

0

2番目の内容を追加しました第1のselectchangeの後にそれが現れるようにするためには、modal divにを置きます。

は、次のコードを参照してください。私は、全体のことを書き留めていないだろうが、私はあなたがポップアップdiv要素にポップアップで表示するために必要なすべてのドロップダウンを置くことを提案します

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

+0

ありがとうございました。@nashcheez –

+0

おめでとうございます。 – nashcheez

0

をし、表示を非表示にし、ドロップダウンイベントでそれらを表示します。

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