Как решить проблему всегда циклического выбора значения параметра из ajax

#javascript #ajax #laravel #dom

Вопрос:

У меня есть данные, при обновлении данных (с помощью модального) выберите параметр правильно работать введите описание изображения здесь

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

Это мой модальный ajax для редактирования:

 // Function for edit modal plan schedule
    $('body').on('click', '.editPlanSchedule', function() {
        var Item_id = $(this).data('id');
        $.get("/quotation/getEditPlanSchedule"   '/'   Item_id, function(data) {
            console.log(data['product_plan']);
            $('.modal-title-edit').html("Edit Plan Schedule Item");
            $('#saveBtn').val("Update");
            $('#updatePlanSchedule').modal('show');
            $('#id').val(data['data'].id);
            $('#qno').val(data['data'].qno);
            $('#b_amount').val(data['data'].b_amount);
            // $('#product_plan_edit').val(data.product_plan);
            
            data['product_plan'].forEach(function(item, index) {
                
                $('#product_plan_edit').append($('<option>', {
                    id: item.id,
                    value: item.productplanID,
                    text: item.productplanID
                }));
                
                if(data['data'].product_plan == item.productplanID){
                    $('#' item.id).attr('selected',true);
                }
            });

        })
    });
 

Это метод от контроллера:

 public function getEditPlanSchedule($id)
{
    $item['data'] = QuotationPlanSchedule::find($id);
    $item['product_plan'] = ProductPlan::orderby('id', 'asc')->get();
    return response()->json($item);
}
 

Ответ №1:

Вы должны очистить все параметры перед повторным добавлением:

 $("#product_plan_edit").empty();
 

Ответ №2:

Либо .опорожните контейнер, либо не используйте добавление (лучше для обновления DOM).

Я немного смущен тем, что вы используете data['data'].product_plan для проверки удостоверения личности. В любом случае вы можете увидеть принцип

 $('#product_plan_edit').html(
  data['product_plan'].map(item => `<option value="${item.productplanID}">${item.productplanID}</option>`).join('')
);
$('#product_plan_edit').val(data['data'].product_plan); // select item.productplanID === data['data'].product_plan