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＆＃39; $.parseHTML()将您的字段HTML转换为DOM节点。如果您使用循环计数器设置id值，则可以稍后使用id引用这些字段。

在以下代码段中，每个字段的id格式为select-<number>。第一个字段为select-1，第二个字段为select-2，依此类推。（我已将变量名称number_units更改为numberUnits，以符合JavaScript命名习惯。）

＆＃13;

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);
};

＆＃13;

#bigForm select {
  margin: 5px;
}

＆＃13;

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

＆＃13;

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;
}

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

Answer 4

不知道这是否是您要找的，但请查看Fiddle

$("#save").on("click", function () {
    $(".form-control").each(function () {
        alert("Selected values: " + $(this).val());
    });
});

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

4 个答案: