javascript - 使用 JavaScript 以编程方式创建表单域

Question

我在 JavaScript 变量中存储了一个 1 到 100 之间的数字:

var number_units = 3;`

我想获取 number_units 的值并多次创建此 HTML 选择字段:

var html = '<select class="form-control input-sm">'+
    '<option value="1">1</option>'+
    '<option value="2">2</option>'+
    '<option value="3">3</option>'+
    '<option value="4">4</option>'+
'</select>';

如果 number_units 是 3，我的代码应该创建选择字段 3 次。

然后我将这些选择字段是使用 AJAX 的一部分的表单保存到 PHP 后端。因此，我需要弄清楚如何在创建 AJAX 帖子时获取所有选择值，并为每个值创建一个单独的数据库条目。

我需要有关 JavaScript 的帮助来创建选择字段 number_units 次。

我可能可以在一个隐藏的表单字段中存储选择字段的计数，然后给它们一个带有递增数字的名称，并在我的后端迭代到该数字以保存每个字段。我将如何从这里继续？

Answer 1

您可以使用 jQuery 的 $.parseHTML()将您的字段 HTML 转换为 DOM 节点。如果你设置一个 id使用循环计数器的值，您可以稍后使用 id 引用这些字段.

在下面的片段中，id每个字段的形式为 select-<number> .第一个字段是 select-1 , 第二个字段是 select-2 ， 等等。 (我已将变量名称 number_units 更改为 numberUnits 以符合 JavaScript 命名习惯。)

var numberUnits = 3;

var fieldHTML = '<select class="form-control input-sm">' +
    '<option value="1">1</option>' +
    '<option value="2">2</option>' +
    '<option value="3">3</option>' +
    '<option value="4">4</option>' +
    '</select>';

window.onload = function () {
  var form = document.getElementById('bigForm'),  // Field container.
      fields = [];
  for (var i = 1; i <= numberUnits; ++i) {        // Iterate numberUnits times.
    var field = $.parseHTML(fieldHTML)[0];        // Make field.
    field.id = 'select-' + i;                     // Set field ID.
    fields.push(field);
  }
  // Insert all fields at front of form.
  $('#bigForm').prepend(fields);
  
  // Test: set fields 2 and 3 to values 2 and 3.
  $('#select-2').val(2);
  $('#select-3').val(3);
};

#bigForm select {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="bigForm"></form>