仅从指定的字段集中提取数据

Pull data only from specified fieldsets

本文关键字：集中 提取 数据 字段      更新时间：2023-09-26

我在一个表单中有多个字段集，这些字段集有单独的input/select元素和下面的JS/jQuery来处理保存时的元素。

var form = {};
$('fieldset').each(function() {
  var fieldsetId = this.id; var fieldset = {};
  $('#'+fieldsetId+' input:checkbox, #'+fieldsetId+' input:radio').each(function() {
    name = $(this).attr('name');
    fieldset[name] = $(this).val();
  });
  $('#'+fieldsetId+' select').each(function() {
    ...
  }
  form[fieldsetId] = fieldset;
});

正在读取数据。问题出在多个字段集上。每个连续的字段集都覆盖最后一个，并使用所有以前的输入值。

目前，返回的处理数据看起来像：

first-fieldset (object)
  key:2
  textbox:"value"
  select:"value"
second-fieldset (object)
  key:2
  textbox:"value"
  select:"value"

应该在哪里：

first-fieldset (object)
  key:1
  textbox:"value"
second-fieldset (object)
  key:2
  select:"value"

我非常怀疑这是选择字段集元素的方式，但我尝试过的所有内容要么都是相同的格式，要么根本没有数据。

在http://jsfiddle.net/gaby/jdR3V/1/

但是，如果将var fieldset = {};置于.each()调用之外，则会失败，正如您所描述的那样。

此外，您还可以对可读性和性能进行一些改进
（对于可直接访问的属性不使用$()，还使用fieldset元素缓存对jquery对象的引用，并使用它来查找输入元素，而不是多个动态选择器）

var form = {};
$('fieldset').each(function() {
  var self = $(this),
      fieldset = {};
  self.find('input:checkbox, input:radio').each(function() {
    fieldset[this.name] = this.value;
  });
  self.find('select').each(function() {
    ...
  }
  form[this.id] = fieldset;
});
相关文章：