javascript - Show popup with selections -

4. i new javascript/jquery.

   • when page loads, show popup user select country. should this:
     enter image description here

   • upon selection of “united states”, should this:
     enter image description here

   • there 2 selections: “united states” , “canada”.

     • upon selection of “united states”, show drop-down list containing list of states.
     • upon selection of “canada” or state, close popup.

just go through code. can open model window on document.ready method in jquery method triggers when html page ready. can show state dropdown if country selected in change event of country dropdown. can append options selected country inside change event of dropdown.

$("#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 modal 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>