javascript - 将选择元素序列化为字典的 jQuery 扩展方法

Question

我有一个如下所示的表单:

<form>
    <input name="foo" value="1" />

    <input name="bar[1]" value="a" />
    <input name="bar[2]" value="b" />
    <input name="bar[3]" value="c" />

    <select name="test" multiple>
        <option value="1" selected>a</option>
        <option value="2" selected>b</option>
        <option value="3" selected>c</option>
    </select>
</form>

我可以像这样序列化表单:

$('form').serialize();

产生:

"foo=1&bar%5B1%5D=a&bar%5B2%5D=b&bar%5B3%5D=c&test=1&test=2&test=3"

我想将选择元素序列化为字典，而是生成以下内容:

"foo=1&bar%5B1%5D=a&bar%5B2%5D=b&bar%5B3%5D=c&test%5B1%5D=a&test%5B2%5D=b&test%5B3%5D=c"

这是我到目前为止所拥有的:

function serializeSelectListAsDictionary() {
    var name = $(this).attr('name'),
        obj = {};

    if (!$(this).is('select') || !name) {
        return '';
    }

    $(this).children('option:selected').each(function() {
        var key = name + '[' + $(this).val() + ']',
            value = $(this).html();

        obj[key] = value;
    });

    return $.param(obj);
}

$.fn.serializeDictionary = function() {
    var serialized;

    if (this.is('select')) {
        return serializeSelectListAsDictionary.apply(this);
    }

    serialized = this.serialize();

    this.find('select').each(function() {
        serialized = serialized.replace($(this).serialize(), serializeSelectListAsDictionary.apply(this));
    });

    return serialized;
};

当我这样调用它时，效果很好:

$('form').serializeDictionary();

但是当我尝试选择多个元素时出现问题。假设我向表单添加了另一个选择元素:

<form>
    <input name="foo" value="1" />

    <input name="bar[1]" value="a" />
    <input name="bar[2]" value="b" />
    <input name="bar[3]" value="c" />

    <select name="test" multiple>
        <option value="1" selected>a</option>
        <option value="2" selected>b</option>
        <option value="3" selected>c</option>
    </select>

    <select name="blah" multiple>
        <option value="4" selected>d</option>
        <option value="5" selected>e</option>
        <option value="6" selected>f</option>
    </select>
</form>

然后，如果我像这样调用我的扩展方法:

$('select').serializeDictionary();

它产生:

"test%5B1%5D=a&test%5B2%5D=b&test%5B3%5D=c&test%5B4%5D=d&test%5B5%5D=e&test%5B6%5D=f"

输出应如下所示:

"test%5B1%5D=a&test%5B2%5D=b&test%5B3%5D=c&blah%5B4%5D=d&blah%5B5%5D=e&blah%5B6%5D=f"

我认为我的 serializeSelectListAsDictionary 函数仅在第一个元素上被调用，但我不知道如何解决这个问题。

fiddle :http://jsfiddle.net/t5aze4r9/1

Answer 1

问题出在 serializeDictionary 函数上。它假设它只会接收一个要序列化的元素。它适用于 $('form').serializeDictionary(); 的情况，因为它只匹配一个 form 元素。但是，如果您有两个 form，您将看到与 $('select').serializeDictionary(); 相同的问题。

当选择器匹配多个元素时，就会出现此问题，因为您只序列化第一个元素。您需要对匹配的元素进行某种迭代。

这是一个尝试尽可能保留代码结构的建议:

$.fn.serializeDictionary = function() {
    var serialized = this.serialize();

    // Here is the key! You need to iterate over all the matched elements.
    this.each(function() {
        if ($(this).is('select')) {
            serialized = serialized.replace($(this).serialize(), serializeSelectListAsDictionary.apply(this));
        } else {         
            $(this).find('select').each(function() {
                serialized = serialized.replace($(this).serialize(), serializeSelectListAsDictionary.apply(this));
            });
        } 
    });

    return serialized;
};

参见updated code .