I am getting duplicate values while calling JSON response from AJAX using jQuery and PHP. The code is running perfectly but it is giving duplicate entries while selecting drop down list. There are two drop down list first one calls from db and based on first one the values get propagated in the second one. And while selecting selecting second one it will call a java script which Return JSON response from AJAX using jQuery but in a duplicated value.
$(document).ready(function(){
$("#employee").change(function() {
//var id = $(this).find(":selected").val();
//var dataString = 'empid='+ id;
var b_code = $(this).find(":selected").val();
var dataString = 'empid='+ b_code;
$.ajax({
url: 'getData.php',
type: 'get',
dataType: 'JSON',
data: dataString,
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var id = response[i].id;
var X1 = response[i].X1;
var X2 = response[i].X2;
var X3 = response[i].X3;
var X4 = response[i].X4;
var X5 = response[i].X5;
var tr_str = "<tr>" +
"<td align='center'>" + (i+1) + "</td>" +
"<td align='center'>" + X1 + "</td>" +
"<td align='center'>" + X2 + "</td>" +
"<td align='center'>" + X3+ "</td>" +
"<td align='center'>" + X4 + "</td>" +
"<td align='center'>" + X5+ "</td>" +
"</tr>";
$("#userTable").append(tr_str);
}
}
})
});
});<!DOCTYPE html>
<html>
<head>
<title>TSP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="csss/bootstrap.min.css">
<link rel="stylesheet" href="csss/style1.css">
<!--</style> -->
<script type="text/javascript">
$(document).ready(function(){
$("#district").change(function(){
var district=$("#district").val();
$.ajax({
type:"post",
url:"getblock.php",
data:"district="+district,
success:function(data){
$("#employee").html(data);
}
});
});
});
</script>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<div class="col-sm-6 col-sm-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><center>Select District & Block</center></h3>
</div>
<div class="panel-body">
District :
<select name="district" id="district">
<option>-select your district-</option>
<?php
include "db_connect.php";
//$result=mysqli_query("SELECT DTCode,DTName from district order by DTName");
$sql = "SELECT DTCode,DTName from district order by DTName";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while($district = mysqli_fetch_assoc($resultset)){
echo "<option value=$district[DTCode]>$district[DTName]</option>";
} ?>
</select>
Block :
<select name="block" id="employee">
<option>-select your block-</option>
</select>
</div>
</div>
</div>
</div>
<div class="container">
<table id="userTable" border="2" >
<tr>
<th width="5%">S.no</th>
<th width="10%">X1</th>
<th width="10%">X2</th>
<th width="10%">X3</th>
<th width="10%">X4</th>
<th width="6%">X5</th>
</tr>
</table>
</div>
</body>
</html>
<script type="text/javascript" src="script/getDatan.js"></script></div>
