Question

因此，当用户在选择选项中选择office时，我会使用此代码，另一个选择框会在employees中加载office。

我的问题是如何在确认＆＃39;确认＆＃39;时，如何存储或保留员工old selected value。按下按钮并加载页面，然后使用old value再次选择相同的current value如果办公室没有更改？

以下是代码：

$( document ).ready(function() {

    var $option = $('#office_id').find('option:selected');
    var value = $option.val();
    updateSalesDay(value);

    $('#office_id').change(function(e){
        var $option = $(this).find('option:selected');
        //Added with the EDIT
        var value = $option.val();
        updateSalesDay(value);
        console.log(value);
    });
});

function updateSalesDay(office_id){
    $('.load-bar').css('display','block');
    $('.panel-body').css('pointer-events','none');

    $('#employee_id').empty();

    $.ajax({
        type: "POST",
        headers: { 'X-CSRF-TOKEN': $('[name="csrf-token"]').attr('content') },
        url: "{{ route('postFilterEmployee') }}",
        data:  {
            'office_id': office_id
        },
        dataType: 'json',
        success: function (data) {
            console.log(data);
            employeesList = data;

            if (employeesList.length === 0) {
                $('#employee_id').append('<option></option>');
            }else{
                $('#employee_id').append('<option></option>');
                for (index = 0; index < employeesList.length; index++) {
                    $('#employee_id').append('<option value="'+employeesList[index].id+'">'+employeesList[index].last_name+' '+employeesList[index].first_name+'</option>');
                }
            }
            $('.load-bar').css('display','none');
            $('.panel-body').css('pointer-events','');
        },
        error: function (data) {
            console.log(data);
        }
    });
}

这里有ajax大师吗？请帮忙。

Answer 1

Kakada Naeng提供的答案解释了两种可能性。

但是@此时您将所有内容存储在后端，因此您应该在呈现表单之前从那里获取它。对于敏感的东西，不要相信浏览器内存！（我下次使用chrome编辑并在IE中打开它。）

让我举个例子。

$( document ).ready(function() {

    // function that will render form
    renderForm();

    var $option = $('#office_id').find('option:selected');
    var value = $option.val();
    updateSalesDay(value);

    $('#office_id').change(function(e){
        var $option = $(this).find('option:selected');
        //Added with the EDIT
        var value = $option.val();
        updateSalesDay(value);
        console.log(value);
    });
});

function renderForm(){
  // don't render form yet but show spinning wheel as default
  var data = fetchSalesDay();
  if(data === null){
    // hide spinning wheel render default form
  }
  else {
    //hide spinning wheel and render form with latest data
  }
}

function updateSalesDay(office_id){
 // code to save 
}

function fetchSalesDay(){
  // fetch the latest data (create backend api route for it)
  // google ajax GET request if you don't know how to do it
  if(data is back){
    return data;
  }
  else { 
   //render default form 
   return null;
  }
}

Answer 2

基本上，如果您想在页面重新加载或刷新后获取数据，则必须在页面刷新或重新加载之前存储它。它有2个地方存储它。首先在服务器（DB或...）上，另一个在客户端（浏览器的本地存储）。

根据您的上下文，我认为您应将其存储在浏览器的本地存储中，然后您可以再次调用它。

将旧的选定值存储在ajax中，然后在页面加载后使用该值进行选择

2 个答案: