選択肢を含むポップアップを表示

Question

4. JavaScript/jQueryを初めて使用しています。

   • ページが最初に読み込まれるときに、ユーザーが国を選択するためのポップアップを表示します。それは次のようになります。「米国」を選択すると
     enter image description here

   • 、それは次のようになります。「米国」と「カナダ」：
     enter image description here

   • 唯一の2つの選択があります。 。

     • "米国"を選択すると、状態のリストを含む別のドロップダウンリストが表示されます。
     • 「カナダ」または状態を選択したら、ポップアップを閉じます。

Answer 1

あなたは間違いなくいくつかの研究を自分で行う必要がありますが、これは働く何かになります：

var country = window.prompt("Please enter 'United States' or 'Canada'", "Enter your country"); 

をしかし、それはドロップダウンではありません。ただし、htmlでは<select>オプションを使用できます。ドロップダウンが本当に必要な場合は、自分でhtmlでポップアップを作成する必要があります。この質問をご覧ください：Drop down list inside a pop up window (comes up when button is pressed)

Answer 2

このコードを実行するだけです。 jQueryのdocument.readyメソッドでモデルウィンドウを開くことができます。このメソッドは、htmlページの準備ができたらトリガーします。 国の変更イベントで国が選択されている場合、州のドロップダウンを表示することができます。ドロップダウンの変更イベントの中で、選択した国のオプションを追加することもできます。

$("#cntry").change(function(){ 
 
if(this.value!="Select Country") 
 
    { 
 
    $('#state').find('option').remove().end().append('<option value="Select State">Select State</option>'); 
 
    
 
    if(this.value=="United States") 
 
    { 
 
     $("#state").append("<option vaue='USA State 1'>USA State 1</option>"); 
 
     $("#state").append("<option vaue='USA State 2'>USA State 2</option>"); 
 
    } 
 
    else if(this.value=="Canada"){ 
 
    $("#state").append("<option vaue='Canada State 1'>Canada State 1</option>"); 
 
     $("#state").append("<option vaue='Canada State 2'>Canada State 2</option>"); 
 
    } 
 
    
 
    $("#divstate").show(); 
 
    } 
 
    else{ 
 
    $("#divstate").hide(); 
 
    } 
 
}); 
 
    
 

 
$(document).ready(function(){ 
 
    $("#btnPopup").click(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
<div class="container"> 
 
    <h2>Example Modal on Page Load</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button style="display:none" id="btnPopup" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">To proceed: Select Country</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div> 
 
      <select class="form-control" ID="cntry"> 
 
    \t \t \t <option class="form-control" value="United States">United States</option> 
 
    \t \t \t <option value="Canada">Canada</option> 
 
      <option selected value="Select Country">Select Country</option> 
 
    \t \t </select> 
 
     </div> 
 
     <div id="divstate" style="display:none"> 
 
     <select class="form-control" ID="state"> 
 
    \t \t \t <option value="Select State">Select State</option> 
 
\t  </select> 
 
     </div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div>