Javascript 使用json数据填充表单中的select元素选项，无需页面刷新

上下文：在我的表单中，我对其进行了设置，这样，如果用户所需的选项在我表单的select元素中不可用，则可以向db插入记录。他们只需通过一个弹出的模式窗口添加新数据，该窗口经过处理，然后将新数据插入我的数据库，并通过json立即可用。没问题

问题：添加到数据库中的新数据可以通过json立即使用，但是如果不刷新整个页面，select元素将不会更新。如何使脚本能够在不刷新页面的情况下解析所有数据的json？我知道这是可能的，也许我在脚本中使用的方法是错误的

从表单中选择元素：

<select name="inputSupplier" id="inputSupplier" class="form-control">
        <option value="0">Select supplier...</option>
</select>

<select name="inputManufacturer" id="inputManufacturer" class="form-control">
        <option value="0">Select manufacturer...</option>
</select>

<select name="inputStatus" id="inputStatus" class="form-control">
        <option value="0">Select asset status...</option>
</select>

<select name="inputCategory" id="inputCategory" class="form-control">
        <option value="0">Select category...</option>
</select>

以下是我当前用于提取和解析json的工作代码：

$document.readyfunction { $.ajax{ url:“/json/collection.json”， 键入：“GET”， 数据类型：“json”， 成功：functiondata { $.eachdata.suppliers，functionkey，value{ $“选择[name=inputSupplier]”。追加+value+； }; $.eachdata.manufacturers，functionkey，value{ $“选择[name=inputManufacturer]”。追加+value+； }; $.eachdata.status、functionkey、value{ $“选择[name=inputStatus]”。追加+value+； }; $.eachdata.categories、functionkey、value{ $“选择[name=inputCategory]”。追加+value+； }; } };

---

}; 您仅在document.ready上获取json，您也应该在提交模式后进行。这就是我想到的：

$(document).ready(function() {
  // Initial load
  refreshData();

  // Also refresh data when modal is submitted. 
  // Adjust selector to match your modal or add the call to your current submit function.
  // Since ajax is async, you could get stale data if this call ends before the submission
  // Put the refreshData inside the success handler of the submit function
  $('#modal form').submit(function() {
    // Post form, etc
    refreshData();
  });
});

function refreshData() {
  $.ajax({
    url: '/json/collection.json',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      refreshSelect('inputSupplier', data.suppliers);
      refreshSelect('inputManufacturer', data.manufacturers);
      refreshSelect('inputStatus', data.status);
      refreshSelect('inputCategory', data.categories);
    }
  });
}

function refreshSelect(name, data) {
  // Select by id
  let $elem = $('#' + name);
  // Get current value
  let oldValue = $elem.val();
  // Get "template" value with value 0, which is the first element
  let emptyOption = $elem.children('option').first();
  // Empty the element and add the option. We are back to initial state
  $elem.html(emptyOption);
  // Append elements retrieved from backend
  $.each(data, function(key, value) {
    $elem.append('<option value="' + key + '">' + value + '</option>');
  });
  // Restore selection
  $elem.val(oldValue);
}

---

只要HTML和JSON与您提供的一样，代码就没有问题。看见我会查看开发者工具的“网络”选项卡，看看AJAX调用是否有任何错误。我查看了您创建的JSFIDLE，它的功能与我的脚本相同。例如，如果向数据中添加新供应商，则select元素不会使用新项目进行更新。显然不会。您必须使用更新的数据调用success函数。同样，在您的问题中，您需要再次调用ajax。这不是魔术，你必须告诉它去获取新数据。另外，您可能希望删除之前添加的选项，除非服务器只返回要添加的新项……对不起，我对使用ajax不太熟悉。我的印象是，它将使用添加到json的任何新数据进行自我更新。显然，我错了。你能再具体一点吗？如何触发它以获取新数据？我将编写一个函数，类似于函数refreshData{$.ajax…；}。然后，您需要决定用户需要多久查看一次新数据。说每分钟一次。添加一个60秒*1000毫秒的通话。如果您希望服务器执行此操作，这将取决于您使用的服务器技术。您可能希望将所选索引保留在内存中，以便在重新加载后可以重置它。这太棒了，谢谢！工作完美。只需在我的模式窗口中添加对表单上刷新数据的调用，但这很容易编辑。

$(document).ready(function() {
  // Initial load
  refreshData();

  // Also refresh data when modal is submitted. 
  // Adjust selector to match your modal or add the call to your current submit function.
  // Since ajax is async, you could get stale data if this call ends before the submission
  // Put the refreshData inside the success handler of the submit function
  $('#modal form').submit(function() {
    // Post form, etc
    refreshData();
  });
});

function refreshData() {
  $.ajax({
    url: '/json/collection.json',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      refreshSelect('inputSupplier', data.suppliers);
      refreshSelect('inputManufacturer', data.manufacturers);
      refreshSelect('inputStatus', data.status);
      refreshSelect('inputCategory', data.categories);
    }
  });
}

function refreshSelect(name, data) {
  // Select by id
  let $elem = $('#' + name);
  // Get current value
  let oldValue = $elem.val();
  // Get "template" value with value 0, which is the first element
  let emptyOption = $elem.children('option').first();
  // Empty the element and add the option. We are back to initial state
  $elem.html(emptyOption);
  // Append elements retrieved from backend
  $.each(data, function(key, value) {
    $elem.append('<option value="' + key + '">' + value + '</option>');
  });
  // Restore selection
  $elem.val(oldValue);
}