使用 ajax json 在下拉列表中显示数据答案

【问题标题】：Display data in a dropdown with ajax json使用 ajax json 在下拉列表中显示数据
【发布时间】：2021-02-04 23:42:43
【问题描述】：

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

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

这是我在 json 中显示数据的 php

<?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);

?>

【问题讨论】：

标签： javascript php json ajax

【解决方案1】：

在将选项分配给您的选择之前，只需从您的选择中删除选项：

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

【讨论】：

谢谢，现在我将研究如何在选项中保留第一个选择。另一个问题是，每次选择另一个答案时，都会返回第一个选项。
我已经更新了摘要和我的答案。现在检查
谢谢，我检查了代码，它对我有用。我将研究如何保留第一个<option value = ""> Select </option>，然后显示其他答案。
感谢您的帮助。