如何使用JQuery從存儲在隱藏字段中的數組添加和刪除項目

我似乎無法以優雅的方式做到這一點，我不明白我看到的一些行爲。如何使用JQuery從存儲在隱藏字段中的數組添加和刪除項目

我已經存儲在HTML我的數組像這樣：
<input type="hidden" id="myField" value="1,2,3,5,8,13">

新增價值，我必須這樣做，這是真的這樣做最徹底的方法？

$('#myField').val($('#myField').val() + ',' + 21);

，並刪除我珍惜我必須做這樣的事情：

newValues=$.grep($('#myField').val(), function(value) { 
     return value != 3; 
    }); 
     $('#myField').val(newValues);

除了這個不工作.....我得到相同的行爲如下所示：

如果我這樣做：

$.grep('1,2,3',function(value){return value!=3;})

它返回這個，爲什麼我得到這些額外的空白元？如何從隱藏輸入中刪除3：

["1", ",", "2", ","]

來源

2010-07-12 Dan

隱藏字段的值是一個字符串，而不是數組。 grep函數將該字符串視爲字符數組，其中,字符沒有任何特殊含義，它只是數組中的另一個元素。

要將字符串視爲逗號分隔的值數組，您需要在處理之前使用JavaScript的split函數將其拆分。一旦完成數組，您可以在將字符串寫回隱藏字段之前使用join將其轉換回字符串。

var newValues = $.grep($('#myField').val().split(','), function(val) { 
    return val != 3; 
}); 
$('#myField').val(newValues.join(','));

來源

2010-07-12 22:47:01 LukeH

可以把它當作使用.split()和.join()陣列，例如添加的值：

$("#myField").val(function(i, v) { 
    var arr = v.split(','); 
    arr.push('21'); 
    return arr.join(','); 
});

或移除一個：

$("#myField").val(function(i, v) { 
    return $.grep(v.split(','), function(value) { 
      return value != 3; 
     }).join(','); 
});

You can test it out here，在我們」每種情況下將字符串值重新轉換爲數組，操作數組，然後將其轉換回字符串。另一種方法是始終處理數組，然後在需要時將其轉換爲字符串，例如在提交表單之前的$("form").submit(...)。

如果你這樣做是所有的地方，你可以把它重新寫爲一個插件，像這樣：

jQuery.fn.extend({ 
    addToArray: function(value) { 
     return this.filter(":input").val(function(i, v) { 
      var arr = v.split(','); 
      arr.push(value); 
      return arr.join(','); 
     }).end(); 
    }, 
    removeFromArray: function(value) { 
     return this.filter(":input").val(function(i, v) { 
      return $.grep(v.split(','), function(val) { 
        return val != value; 
        }).join(','); 
     }).end(); 
    } 
});

的通話是這樣的（可鏈接如果需要）：

$("#myField").addToArray('21'); 
$("#myField").removeFromArray('3');

You can test that version here

來源

2010-07-12 22:47:29

+1顯示使用像http://jsfiddle.net好工具運行的例子 – 2010-07-12 22:49:55

我會給+10，如果我能做到這一點:) ...優秀的解決方案... – 2012-02-21 12:12:28

優秀解。 – AaBa 2016-12-30 01:24:54

這種方法也許能夠幫助你。試試下面的函數刪除的價值和得到的結果

function removeVal(list, value) { 
    list = list.split(','); 
    list.splice(list.indexOf(value), 1); 
    return list.join(','); 
} 

removeVal('1,2,3', '2'); 
//result "1,2"

要添加一個值，先發使用下面的函數

function addVal(list, value){ 
list = list + value; 
return list; 
} 

addVal("1,2,3",",4"); //result 1,2,3,4

來源

2010-07-12 22:51:32 Raftalks

保持相同的值設置爲您當前擁有，你可以添加/如下刪除值：

要添加的值：

$input = $("input"); 

var array = $input.val().split(","); 
array.push(7,8,9); 
$input.val(array);

要刪除值：

$input = $("input"); 

var array = $input.val().split(","); 
array = $.grep(array, function(n, i) { return n !== "13"; });//"13" can be any value or variable you choose. 
$input.val(array);

Short demo here.

不過，如果你能夠改變的隱藏字段值的格式，你可以使用數據的（）方法的jQuery或元數據（）插件，如果你選擇：

//Using metadata() with html5 attributes 

//Markup 

<input type="hidden" id="myField" data-value="[1,2,3,5,8,13]"> 

//JS 

var $input = $("input"); 

$.metadata.setType("html5"); 
$input.metadata().value.push(7,8,9);

元數據部分是未經測試，但你可以用一個元素作爲對象，而不是一個字符串進行交互。沒有分割需要;）

來源

2010-07-12 23:43:37

如何使用JQuery從存儲在隱藏字段中的數組添加和刪除項目

回答

相關問題