使用JavaScript以编程方式创建表单字段

Question

我将一个介于1到100之间的数字存储在一个JavaScript变量中：

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次选择字段。

然后，我保存这些选择字段是PHP后端使用AJAX的一部分的表单。因此，我需要弄清楚在我的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>

​

Answer 2

// Get your form
var form = document.getElementById('#form');

// Repeat n times
for(var i = 0; i < number_units; i++){
  // Create select element and assign it the class name
  var select= document.createElement('select');
  select.className = 'form-control input-sm';

  // Create 4 option elements with value and text
  var o1 = document.createElement('option');
  o1.value = '1';
  o1.text = '1';
  var o2 = document.createElement('option');
  o2.value = '2';
  o2.text = '2';
  var o3 = document.createElement('option');
  o3.value = '3';
  o3.text = '3';
  var o4 = document.createElement('option');
  o4.value = '4';
  o4.text = '4';

  // Append the option elements to the select element
  select.appendChild(o1);
  select.appendChild(o2);
  select.appendChild(o3);
  select.appendChild(o4);

  // Append the select element to the form element
  form.appendChild(s);
}

Answer 3

看看这把小提琴http://jsfiddle.net/vgp8kx4g/

var number_units = window.prompt("Enter the number of options", 2);

if(number_units * 1 > 0) {
    var html = '<select class="form-control input-sm">';
    for(var i=1; i<= number_units; i++) {
        html += '<option value="' + i + '">' + i + '</option>';
    }
    html += '</select>';
    document.body.innerHTML = html;
}

而不是document.body，您可以将html插入到任何有效的DOM元素中。如果采用多个值，则更改标记为<select multiple>