Question

我是JavaScript / jQuery的新手。
- 页面最初加载时，会显示一个弹出窗口供用户选择国家/地区。看起来应该是这样的：
  enter image description here
- 选择“美国”后，它应如下所示：
  enter image description here
- 只有两种选择：“美国”和“加拿大”。
  - 选择“美国”后，显示另一个包含州名列表的下拉列表。
  - 选择“加拿大”或州后，请关闭弹出窗口。

Answer 1

只需完成此代码即可。您可以在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">
 			 <option class="form-control" value="United States">United States</option>
  			 <option value="Canada">Canada</option>
             <option selected value="Select Country">Select Country</option>
  		   </select>
         </div>
         <div id="divstate" style="display:none">  
         <select class="form-control" ID="state">
  			   <option value="Select State">Select State</option>
	      </select>
         </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

Answer 2

你自己应该做一些研究，但这将是有效的：

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)

显示包含选择的弹出窗口

2 个答案: