선택 항목 팝업 표시

Question

4. 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>