Question

我有多个div元素，每个元素都有一组表单字段（文本输入和选择）。

这些字段的name属性与“name”具有相同的值，而不是rel属性。

如何在这些字段中重现jQuery序列化（http://api.jquery.com/serialize/）的行为？

HTML看起来像这样：

<div>
  <input type="text" rel="title" value="bla" />
  <input type="text" rel="count" value="5" />
  <select rel="page">
    <option value="home">home</option>
    <option value="about" selected="selected">about</option>
    <option value="404">404</option>
  </select>
  <input type="hidden" name="serialize_above_fields[]" value="" />
</div>

<div>
  <input type="text" rel="title" value="bla" />
  <input type="text" rel="count" value="5" />
  <select rel="page">
    <option value="home">home</option>
    <option value="about" selected="selected">about</option>
    <option value="404">404</option>
  </select>
  <input type="hidden" name="serialize_above_fields[]" value="" />
</div>

...

基本上我想生成一个隐藏的输入字段，其中包含div所在的div中的所有字段值（并使用rel作为键），如：

<input type="hidden" name="serialize_above_fields[]" value="title=bla&count=5&page=check2&page=about" />

Answer 1

如果您的输入元素都在<form></form>范围内，您可以尝试使用以下内容序列化您的表单：

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.rel]) {
            if (!o[this.rel].push) {
                o[this.rel] = [o[this.rel]];
            }
            o[this.rel].push(this.value || '');
        } else {
            o[this.rel] = this.value || '';
        }
    });
    return o;
};

Answer 2

您可以使用jQuery的map实用程序轻松完成此操作。

$('div').each(function() {
  var serializedData = $(this).find(':text, select').map(function(i, el) {
    return $(el).attr('rel') + '=' + $(el).val();
  }).get();

  $(this).find('input[type=hidden]').val(serializedData.join('&'));
});

jQuery - 重现序列化（）

2 个答案: