Question

我在使用jQuery和PHP从AJAX调用JSON响应时获取重复值。代码运行正常，但在选择下拉列表时会给出重复的条目。有两个下拉列表，第一个来自db的调用，并且基于第一个，值在第二个中传播。在选择第二个时，它将调用一个java脚本，该脚本使用jQuery从AJAX返回JSON响应，但是具有重复值。

$(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>

Answer 1

正如我在评论中提到的，你可以使用一个数组存储你传递的id，并且在每次迭代时你可以检查你是否有重复的。

以下是一个例子：

var testArray = [];

var len = response.length;
    for(var i=0; i<len; i++){
        if($.inArray(response[i].id, testArray)){ // check whether you have went over it already
            continue;
        }
        testArray.push(response[i].id); // add the current id to the list and thats how you will avoid duplicates, assuming that the IDs are duplicate
        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);

希望这有帮助！

防止jquery在表中追加重复值

1 个答案: