<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<select name="country" class="countries order-alpha" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states order-alpha" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities order-alpha" id="cityId">
<option value="">Select City</option>
</select>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystatecity.js"></script>
