使 jQuery 动态字段独一无二

Posted 2023-05-09

【中文标题】使 jQuery 动态字段独一无二

【英文标题】：Make jQuery dynamic fields unique

【发布时间】：2017-10-12 16:02:01

【问题描述】：

我有动态添加的表单字段。如何检查这些字段的值是否唯一？

html：

<div class="inputs">
      <input type="text" class="form-control" id="regSection" name="regSection[]" required="required">
</div>
<a href="#" id="#add">ADD</a>

javascript：

$('#add').click(function(e) 
    e.preventDefault();
    $('<input type="text" class="form-control" id="regSection" name="regSection[]">').fadeIn('slow').appendTo('.inputs');
);

【问题讨论】：

首先，id中不需要添加#。 # 只是 id 的选择器

其次，ID 必须是唯一的。您输入的所有字段都将获得相同的 ID。

【参考方案1】：

我已从输入中删除了 ID，因为 ID 必须是唯一的。

此代码将返回 found id 重复文本框中的值。否则，它将返回not found。

$('#add').click(function(e) 
    e.preventDefault();
    $('<input type="text" class="form-control" n ame="regSection[]">').appendTo('.inputs');
);

$('#check').click(function(e)
    var arr = [];
    var found = 0;
    $('.inputs input').each(function()
        var myVal = $(this).val();
        if(arr.includes(myVal))
            found++;
        else
            arr.push(myVal);
    );
    
    if(found) 
        console.log('found');
    else 
        console.log('unique');

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputs">
      <input type="text" class="form-control" name="regSection[]" required="required">
</div>
<a href="#" id="add">ADD</a>

<button id="check">Check</button>

【讨论】：

非常感谢！关于 ID - 这只是一个示例代码，我的代码太长了。我没有注意到这个ID。而这个解决方案正是我所需要的！

很高兴它有帮助 :) 如果它解决了您的问题，您可以将其标记为答案 :)