Question

我创建了一个div和一个按钮。当单击按钮时，将有一组元素（包括1个选择框和2个文本输入）插入到div中。用户可以尽可能多地添加组，当他们完成键入他们添加的所有组的数据时，他可以点击保存按钮，这将把每个组中的值一个接一个地输入到JSON对象数组中。但我仍然坚持如何从每个组中获取价值，所以请帮助，谢谢。

div的代码和添加组按钮功能 - AddExtra（）如下所示：

<div id="roomextra">
</div>

function AddExtra() {
$('#roomextra').append('<div class=extra>' +
'<select id="isInset">' +
'<option value="Inset">Inset</option>' +
'<option value="Offset">OffSet</option>' +
'</select>' + 
'Length(m): <input type="text" id="insetLength">' +
'Width(m): <input type="text" id="insetWidth">' +
'Height(m): <input type="text" id="insetHeight">' +
'</div>');
}

function GetInsetOffSetArray (callBack) {

  var roomIFSDetail = [{
   "IsInset": '' ,
   "Length": '' , 
   "Width": ''  , 
   "Height": ''
  }];

//should get all the value from each group element and write into the array.

callBack(roomIFSDetail);

}

Answer 1

这应该就是这样做的。但是，如果您正在动态创建这些组，则需要使用除id之外的其他内容。您可能希望向其添加类或data-*属性。在这种情况下，我使用了一个类。将这些类添加到控件中，以便我们知道哪个是哪个。

var roomIFSDetail = [];
var obj;

// grab all of the divs (groups) and look for my controls in them
$(.extra).each(function(){
  // create object out of select and inputs values
  // the 'this' in the selector is the context. It basically says to use the object
  // from the .each loop to search in. 
  obj = {
           IsInset: $('.isInset', this).find(':selected').val() ,
           Length: $('.insetLength', this).val() ,
           Width: $('.insetWidth', this).val() , 
           Height: $('.insetHeight', this).val()
        }; 
  // add object to array of objects
  roomIFSDetail.push(obj);
});

Answer 2

您最好不要使用id属性来识别select和input，name属性。例如

 $('#roomextra').append('<div class=extra>' +
     '<select name="isInset">' +
     '<option value="Inset">Inset</option>' +
     '<option value="Offset">OffSet</option>' +
     '</select>' + 
     'Length(m): <input type="text" name="insetLength">' +
     'Width(m): <input type="text" name="insetWidth">' +
     'Height(m): <input type="text" name="insetHeight">' +
     '</div>');
 }

然后，usr foreach迭代

 $(".extra").each(function() {
     var $this = $(this);
     var isInset = $this.find("select[name='isInset']").val();
     var insetLength = $this.find("input[name='insetLength']").val();
     // ... and go on
 });

Answer 3

一个常见问题。几件事：

您不能在要重复的部分中使用ID，因为DOM中的ID应该是唯一的。
我更喜欢使用标记，我正在编写很多标记，并在代码中修改它而不是在那里生成标记。

http://jsfiddle.net/b9chris/PZ8sf/

HTML：

<div id=form>
... non-repeating elements go here...

<div id=roomextra>
<div class=extra>

<select name=isInset>
<option>Inset</option>
<option>OffSet</option>
</select>
Length(m): <input id=insetLength>
Width(m): <input id=insetWidth>
Height(m): <input id=insetHeight>

</div>
</div>

</div>

JS：

(function() {
// Get the template
var container = $('#roomextra');
var T = $('div.extra', container);

$('#addGroup').click(function() {
    container.append(T.clone());
});

$('#submit').click(function() {
    var d = {};
    // Fill d with data from the rest of the form

    d.groups = $.map($('div.extra', container), function(tag) {
        var g = {};
        $.each(['isInset', 'insetLength', 'insetWidth', 'insetHeight'], function(i, name) {
            g[name] = $('[name=' + name + ']', tag).val();
        });

        return g;
    });

    // Inspect the data to ensure it's what you wanted
    debugger;
});

})();

因此，不断重复的模板是用普通的旧HTML编写的，而不是一堆相互附加的JS字符串。使用name属性而不是id来保持这些元素通常的工作方式，而不会违反任何DOM约束。

你可能会注意到我没有引用我的属性，从选项中取出值属性，并从输入中取出类型属性，以使代码保持一点DRYer。 HTML5规范不需要引用属性，如果没有明确指定值属性，则选项标记的值是文本的值，输入标记默认为type = text如果没有指定，则所有这些都加起来为更快速的阅读和更轻薄的HTML。

Answer 4

使用$（“。extra”）。each（function（）{

//从这里的ctrls中提取信息

}）;

这将遍历所有额外的div，并允许您将所有值添加到数组中。

如何创建动态控件并将其数据放入对象？

4 个答案: