时间戳

首页 > 解决方案 > 使用 ajax json 在下拉列表中显示数据

javascript - 使用 ajax json 在下拉列表中显示数据

问题描述

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

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

?>

标签： javascriptphpjsonajax

解决方案

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

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

推荐阅读