I'm create two select menu in jqm page, and load option value in ajax,but first select menu will load second menu was not loading ,if I refresh a page two select menu has loading correctly, please help me
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
<link rel="stylesheet" href="resources/css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="resources/css/PreRegistration.css">
<script src="resources/js/jquery-2.1.4.min.js"></script>
<script src="resources/js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="registration">
<!-- header -->
<div data-role="header" data-position="fixed" data-theme="b">
<h1 style="color: white;">Pre-Registration</h1>
</div>
<!-- /header -->
<div data-role="content">
<form id="preRegistrationForm" method="post" action="savePreRegistration">
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="preRegNo">Pre-registration Number</label>
<input type="text" name="preRegNo" id="preRegNo" value="">
</li>
<li class="ui-field-contain">
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" value="">
</li>
<li class="ui-field-contain">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" value="">
</li>
<li class="ui-field-contain">
<label for="DOB">Date of birth</label>
<input type="date" name="DOB" id="DOB" value=""></li>
<li class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal" data-theme="b" id="gender" name="gender">
<legend>Gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</li>
<li class="ui-field-contain">
<label for="adress">Address:</label>
<textarea cols="40" rows="8" name="address" id="address"></textarea>
</li>
<li class="ui-field-contain"><label for="state">State:</label>
<select id="state" name="state" data-mini="true"></select>
<script type="text/javascript">
var response = $.ajax({type:"GET",url:"getStates",async:false}).responseText;
var data = $.parseJSON(response);
var output="";
for (var int = 0; int < data.length; int++) {
output += '<option>' + data[int].state + '</option>';
}
$('#state').append(output);
</script>
</li>
<li class="ui-field-contain">
<label for="country">Country</label>
<select id="country" name="country" data-mini="true">
</select>
<script type="text/javascript">
var response = $.ajax({type:"GET",url:"getCountry",async:false}).responseText;
var data1 = $.parseJSON(response);
var output1="";
for (var int = 0; int < data1.length; int++) {
output1 += '<option>' + data1[int].state + '</option>';
}
$('#country').append(output);
</script>
</li>
<li class="ui-field-contain">
<label for="phone">Phone:</label>
<input type="tel" data-clear-btn="true" name="phone" id="phone">
</li>
<li class="ui-field-contain">
<label for="mobile">Mobile:</label>
<input type="tel" data-clear-btn="true" name="mobile" id="mobile" />
</li>
<li class="ui-field-contain">
<label for="emailId">EMail Id:</label>
<input type="email" data-clear-btn="true" name="emailId" id="emailId" />
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-b">
<button type="reset"
class="ui-btn ui-corner-all ui-btn-a ui-mini">Cancel</button>
</div>
<button id="preRegSubmit" type="submit"
class="ui-btn ui-corner-all ui-btn-a ui-mini">Submit</button>
</div>
</fieldset>
</li>
</ul>
</form>
</div>
<!-- /content -->
<div data-role="footer" data-theme="b" data-position="fixed">
</div>
<!-- /footer -->
</div>