Add Drop-down Country & State List Dynamically

This is a simple international country and state drop down list that automatically repopulates the state section based on the country selected. All of this is done without reloading the page.

Instructions

Insert this code into the document head between the following tags <head>...</head>:

<script src="https://www.usaepay.com/content/js/epayform-utils.js"></script>

Find the State field: 

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">State</span>
  <div class="col-md-8 col-xs-12 ">
    <input id="UMbillstate" name="UMbillstate" class="form-control" type="text" placeholder="State" value="[UMbillstate]">
  </div>
</div>

and replace it with:

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">State</span>
  <div class="col-md-8 col-xs-12 ">
    <select name ="UMbillstate" id ="state"><option selected="selected">Select State</option></select>
  </div>
</div>

Find the Country field: 

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">Country</span>
  <div class="col-md-8 col-xs-12 ">
    <input id="UMbillcountry" name="UMbillcountry" class="form-control" type="text" placeholder="Country" value="[UMbillcountry]">
  </div>
</div>

and replace it with:

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">Country</span>
  <div class="col-md-8 col-xs-12 ">
    <select id="country" name ="UMbillcountry"></select>
  </div>
</div>

5) Add the following at the bottom of the form between </body>...</html>

  `<script language="javascript">populateCountries("country", "state");</script>`