如何使用 jQuery 在表单中获取第一个唯一的多值（数组表示）输入？答案

【问题标题】：How to get the first unique multivalue (array-notated) inputs in a form using jQuery?如何使用 jQuery 在表单中获取第一个唯一的多值（数组表示）输入？
【发布时间】：2013-10-13 03:07:13
【问题描述】：

我有这样的表格：

<form>
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="tag_id[]"></select>
    <select name="tag_id[]"></select>
    <select name="stack_id[]"></select>
    <!-- ... etc. -->
</form>

我想得到一个包含第一个多值元素的 jQuery 集合：

<form>
    <select name="user_id[]"></select>   <!-- this -->
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="user_id[]"></select>
    <select name="tag_id[]"></select>    <!-- this -->
    <select name="tag_id[]"></select>    
    <select name="stack_id[]"></select>  <!-- this -->
    <!-- ... etc. -->
</form>

我从$('[name$="[]"]') 开始，但我从那里卡住了。是否有一个简单的选择器方法，或者我必须全部选择它们并过滤我想要的那些？

【问题讨论】：

其次... 输入元素的正确术语是什么：id[]？当有人可以告诉我时，我会更清楚地编辑我的问题。
我不确定是否有以这种方式命名的元素的特定术语，但这并不重要。问题的核心适用于所有具有相同名称的元素，无论它是否以方括号结尾。
带有输入元素 <input name="foo" value="bar"/><input name="foo" value="baz"/> 的 POST 表单仍将 POST 两个 foo 值 bar i> 和 baz，只是服务器只会选择其中之一。 [] 表示法只是让服务器端引擎知道期待多个，因此使用不同的数据类型。
谢谢。它实际上只是用于一点无关紧要的教育，因此我可以将其用于将来在 Google 搜索中的参考。

标签： javascript jquery forms input jquery-selectors

【解决方案1】：

以这种方式选择元素并没有什么神奇的方法，因此需要一些手动操作。

首先，按名称对元素进行分组：

var buckets = {}; // keys: "name" attribute values, values: arrays of elements
$('[name$="[]"]').each(function() {
    var name = this.name,
        bucket = buckets[name] || (buckets[name] = []);
    bucket.push(this);
});

然后您可以从每个桶中选择第一个元素并将其放入一个 jQuery 对象中：

// start with an empty jQuery object
var $firstOfEach = $([]);

// add to the above the first element inside each bucket
$.each(buckets, function() { $firstOfEach = $firstOfEach.add(this[0]); });

See it in action.

【讨论】：