Блог

Главная - Вопросы по программированию - Отображение данных в выпадающем списке с помощью ajax json

Отображение данных в выпадающем списке с помощью ajax json

#javascript #php #json #ajax

#javascript #php #json #ajax

Вопрос:

Спокойной ночи, у меня вопрос с моим выпадающим меню: данные отображаются при выборе, пока все хорошо, но каждый раз, когда я отображаю меню, оно добавляет данные, но мне требуется, чтобы оно обновлялось только в случае каких-либо изменений в базе данных.

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

?>

Ответ №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>

Комментарии:

1. Спасибо, теперь я разберусь, как сохранить первый выбор в настройках. Другой вопрос заключается в том, что каждый раз, когда выбирается другой ответ, он возвращается к первому варианту.

2. Я обновил фрагмент и свой ответ. теперь проверьте

3. Спасибо, я проверил код, и он сработал для меня. Я просто выясню, как сохранить первый <option value = ""> Select </option> , а затем отобразить другие ответы.

4. Спасибо за помощь.