javascript - 从 JSON 填充 Bootstrap 模态表单字段

Question

我有一个显示大型表单(30 多个输入)的 Bootstrap 模态。

我编写了以下代码来填充 JSON 的前几个字段。

$('#seg-detail-modal').on('shown.bs.modal', function (e) {

  var modal = $(this);

  $.get( "includes/segdata.json", function( data ) {
    $('#seg-detail-modal').find("input[name='segCode']").val(data.segCode);
    $('#seg-detail-modal').find("input[name='orgName']").val(data.orgName);
    $('#seg-detail-modal').find("input[name='referenceId']").val(data.referenceId);
  });

});

有没有比我在这里做的更有效的填充大型表单的方法？

Answer 1

您可以只遍历对象属性并将选择器与该循环中的属性匹配。

类似于:

$('#seg-detail-modal').on('shown.bs.modal', function(e) {
  var $inputs = $(this).find(':input');
  $.getJSON("includes/segdata.json", function(data) {
    $.each(data, function(key, val) {
      $inputs.filter('[name="' + key + '"]').val(val);
    });
  });
});

如果存在不匹配的属性，选择器将安静地失败