Question

我正在尝试向隐藏字段添加多个值。它运行正常，但我希望隐藏字段中添加的值是唯一的，如果输入的值不止一次，则不会添加。

interestin是选择值的selectbox的名称，interest是隐藏字段的id，其中值在选择框中选择选项时以逗号分隔值的形式添加。

如果选择两次相同的选项，则会在隐藏字段中添加两次。我不希望任何值被添加到隐藏字段中，尽管它被选中两次。

在选择框中选择值时会调用函数点击器（name =＆＃34; interestin＆＃34;），这些值将添加到隐藏字段中（id =＆＃34; interest＆＃34;）

function clicker(){
            var itemsobj=document.getElementsByName("interestedin[]");
            str='';
            //alert(itemsobj[0].value);
            //alert('test');
            count=0;
            var arr = new Array();
    for(var i=0;i<itemsobj.length;i++)
        {
            count += 1;
            str +=itemsobj[i].value+',';
            //alert(str);
            arr[i] = itemsobj[i].value; 
                }
            var length=str.length;
            var strr=str.substring(0,length-1);
            document.getElementById('interest').value = strr;
            //alert(strr);


            setProductPrice(arr,count);
        }

Answer 1

我会使用一个对象作为标记持有者，因为你之前是否看过一个值，因为查找对象中的属性是JavaScript引擎优化的。相反，如果您将此信息保存在一个数组中，那么当您向其中添加更多条目时，对Array#indexOf无法找到任何内容的调用会变得越来越慢。

function clicker() {
    var itemsobj = document.getElementsByName("interestedin[]");
        seen = {},
        value,
        i,
        arr = [];

    for (i = 0; i < itemsobj.length; i++)
    {
        value = itemsobj[i].value;
        if (!seen[value])   // Works because if we haven't, `seen[value]` is `undefined` which is falsy
        {
            seen[value] = true;
            arr.push(value);
        }
    }

    document.getElementById('interest').value = arr.join(",");
    setProductPrice(arr, arr.length);
}

假设您还希望arr中列出的每个值只有一次。请注意使用Array#join而不是字符串连接。由于我们现在只将每个值设置为arr一次，因此我们根本不需要count。

Answer 2

每次添加新项目时，我都会将其添加到您的点击器功能之外的数组中。

这样，您可以在尝试再次添加项目之前检查数组中是否存在该项目。

<强>更新

Here's a quick demo

var usedItems = [];

var possibleItems = ["one","two","two","three"]

for(var i=0; i < possibleItems.length; i++)
{
    // If the item is not in the array
    if(usedItems.indexOf(possibleItems[i]) == -1)
    {
        usedItems.push(possibleItems[i]);   
    }
}

alert(usedItems.length); // Should return 3 since item "two" is possible twice.

Answer 3

有几种方法可以做到这一点。您可以使用字符串方法.indexOf()来检查该值是否已存在于str变量中。或者使用对象存储已添加的值，以便于查找。但是鉴于您已经在构建一个包含值的数组，您可以使用.indexOf()检查数组（注意旧版本的IE不支持array.indexOf（），但是在{}处有一个实现{3}}您可以轻松地将其包含在您的项目中）。

您的功能可以稍微整理一下：

您应该使用var声明所有变量，否则它们将是全局的（除非您是故意这样做的。）
当for循环结束时，count和i变量将具有相同的值，因此您不需要两者（请注意JavaScript没有块范围，因此{{1可以在函数内的任何地方访问，而不只是在for循环中访问。）
您不需要i或length个变量，因为它们只使用一次：您可以说strr甚至document.getElementById('interest').value = str.substr(0,str.length-1);
您不需要... = str.slice(0,-1);变量，因为您正在向数组添加项目，并且可以使用str直接从数组创建逗号分隔的字符串。

所以：

.join()

您没有显示// if you don't want to use array.indexOf() due to lack of support in IE<9 // just remove the if statement that uses it and uncomment the three // lines that use "items" function clicker(){ var itemsobj = document.getElementsByName("interestedin[]"), arr = [], // items = {}, val, i; for(i=0; i<itemsobj.length; i++) { val = itemsobj[i].value; // if (!items[val]) { if (-1 === arr.indexOf(val)) { // items[val] = true; arr.push(val); } } document.getElementById('interest').value = arr.join(","); setProductPrice(arr,arr.length); }函数的功能，但为什么要传入一个数组和一个基本上是数组长度的参数？该函数可以将长度本身作为数组的属性。在任何情况下，我仍然在上面的代码中传递它。

如何在JS中动态地向文本框添加多个值时避免重复值？

3 个答案: