顯示彈出式選項

Question

1. 我是JavaScript/jQuery新手。

   • 當頁面初始加載時，顯示用戶選擇國家的彈出窗口。它應該是這樣的：
     enter image description here

   • 在「美」的挑選上，就應該是這樣的：
     enter image description here

   • 只有兩種選擇：「美國」和「加拿大」 。

     • 選擇「美國」後，顯示另一個包含狀態列表的下拉列表。
     • 選擇「加拿大」或州後，關閉彈出窗口。

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>