使用ajax json在下拉菜单中显示数据

Question

晚安，我对我的下拉菜单有一个问题数据显示我在选择中，到目前为止还不错，但每次我显示菜单时，它都会添加数据，但我需要的是，只有在数据库中有任何变化时才更新。

<div class="col-md-6">
<div class="form-group">
<label>Brands: <span class="text-danger">*</span></label>
<select id="BrandsEnabled" class="custom-select" required>
<option value="">Select</option>
</select>
</div>
</div>

脚本，我在下拉菜单

中显示数据

<script type="text/javascript">
$('#BrandsEnabled').click(function() {
$.ajax({
type: "GET",
url:"SelectBrandsEnabled.php",
dataType: "json",
success: function(data){
$.each(data,function(key, info) {
$("#BrandsEnabled").append('<option value='+info.id_brand+'>'+info.name_brand+'</option>');
$('#BrandsEnabled').fadeIn(100);
setInterval('#BrandsEnabled', 100);
});
},
error: function(data) { alert('error'); }
});
</script>

这是PHP的json格式

<?php
header('Content-type: application/json; charset=UTF-8');
require_once dirname( __DIR__ ) .'/sql.php';
$conn = new System();
$data=array();
$sqlBrandsEnabled=$conn->SelectProductsBrandEnabled();
$sqlBrandsEnabled->execute();
$sqlViewRow = $sqlBrandsEnabled->fetchAll();
foreach ($sqlViewRow as $ViewRow)
{
$option=array("id_brand"=>$ViewRow["id_brand"],"name_brand"=>$ViewRow["name_brand"]);
$data[]=$option;
}
echo json_encode($data);
?>

Answer 1

在将选项分配给select之前先从select中删除选项:

$('#BrandsEnabled').find('option').remove();

$('#BrandsEnabled').click(function() {
let value = $('#BrandsEnabled').val();
$.ajax({
type: "GET",
url:"https://reqres.in/api/users?page=2",
dataType: "json",
success: function(data){
$('#BrandsEnabled').find('option').remove();
$("#BrandsEnabled").append(`<option value='' disabled="disabled">Select</option>`);
$.each(data.data,function(key, info) {
$("#BrandsEnabled").append(`<option value=${info.id}>${info.first_name}</option>`);

});
$('#BrandsEnabled').val(value);
},
error: function(data) { alert('error'); }
});
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="col-md-6">
<div class="form-group">
<label>Brands: <span class="text-danger">*</span></label>
<select id="BrandsEnabled" class="custom-select"></select>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>