使用 jquery 将 jquery 数组更新为隐藏字段答案

【问题标题】：Updated the jquery array to the hidden field using jquery使用 jquery 将 jquery 数组更新为隐藏字段
【发布时间】：2014-01-13 09:15:35
【问题描述】：

我有多重选择框。这是我的 HTML 代码：

<section class="container">
<div>
<select id="leftValues" name="leftValues[]" size="5" multiple>
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>
<input type="hidden" id="txtLeft" name=txtLeft/>
</div>
<div>
<input type="button" id="btnLeft" value="&lt;&lt;" />
<input type="button" id="btnRight" value="&gt;&gt;" />
</div>
<div>
<select id="rightValues" name=rightValues[] size="4" multiple>
<option value="x">9</option>
<option value="y">8</option>
<option value="z">7</option>
</select>
<div>
<input type="hidden" id="txtRight" name=txtRight/>
</div>
</div>
</section>
<button type="submit" id="value"  class="blue">Save</button>

这就是我尝试过的 jQuery。当我单击“保存”按钮时，我希望将数组 addedLeftValues 中的所有值更新为 txtLeft，并将 addedRightValues 中的值更新为 txtRight。

<script>
var left;
var right;
var newLeft;
var newRight;
var addedLeftValues = new Array();
var addedRightValues = new Array();

$(document).ready(function() { 
SaveOldValues();
});

function SaveOldValues()
{
left = new Array();
right = new Array();
$('#leftValues .left').each(function(){
left.push($(this).val());
});
$('#rightValues .right').each(function(){
right.push($(this).val());
});
}

function UpdatedValues()
{
newLeft = new Array();
newRight = new Array();
$('#leftValues .left').each(function(){
newLeft.push($(this).val());
});
$('#rightValues .right').each(function(){
newRight.push($(this).val());
});;
}

$("#btnLeft").click(function () {
var selectedItem = $("#rightValues option:selected");
$(selectedItem).attr("class","left");
$("#leftValues").append(selectedItem);
});

$("#btnRight").click(function () {
var selectedItem = $("#leftValues option:selected");
$(selectedItem).attr("class","right");
$("#rightValues").append(selectedItem);
});

$("#rightValues").change(function () {
var selectedItem = $("#rightValues option:selected");
});

$("#value").on("click",function(){
UpdatedValues();
$(newLeft).each(function(k,value){
if($.inArray(value, left) == -1)
{
alert("new value in left is: " + value);
addedLeftValues.push(value);
$("#txtLeft").val(function(i, v) {
arr.push(addedLeftValues);
});
        
}
});
$(newRight).each(function(k,value){
if($.inArray(value, right) == -1)
{
alert("new value in Right is: " + value);
addedRightValues.push(value);
$("#txtRight").val(function(i, v) {
arr.push(addedRightValues);
});
}
});
});

这是我的 CSS 代码：

<style>
SELECT, INPUT[type="text"] {
width: 160px;
box-sizing: border-box;
}
SECTION {
padding: 8px;
background-color: #f0f0f0;
overflow: auto;
}
SECTION > DIV {
float: left;
padding: 4px;
}
SECTION > DIV + DIV {
width: 40px;
text-align: center;
}
</style>

【问题讨论】：

代码太多。你能把它分解成你认为问题所在的部分吗？
我无法将 addedRightValues 数组值放入 txtRight 中，您可以在我的程序的脚本部分找到它。 in("#value").on("点击",function()

标签： php jquery html css codeigniter

【解决方案1】：

当您将所有代码放入圆顶就绪方法时，它似乎可以工作

$(function () {
    var left;
    var right;
    var newLeft;
    var newRight;
    var addedLeftValues = new Array();
    var addedRightValues = new Array();


    SaveOldValues();


    function SaveOldValues() {
        left = new Array();
        right = new Array();
        $('#leftValues .left').each(function () {
            left.push($(this).val());
        });
        $('#rightValues .right').each(function () {
            right.push($(this).val());
        });
    }

    function UpdatedValues() {
        newLeft = new Array();
        newRight = new Array();
        $('#leftValues .left').each(function () {
            newLeft.push($(this).val());
        });
        $('#rightValues .right').each(function () {
            newRight.push($(this).val());
        });;
    }

    $("#btnLeft").click(function () {
        var selectedItem = $("#rightValues option:selected");
        $(selectedItem).attr("class", "left");
        $("#leftValues").append(selectedItem);
    });

    $("#btnRight").click(function () {
        var selectedItem = $("#leftValues option:selected");
        $(selectedItem).attr("class", "right");
        $("#rightValues").append(selectedItem);
    });

    $("#value").click(function () {
        UpdatedValues();
        $(newLeft).each(function (k, value) {
            if ($.inArray(value, left) == -1) {
                alert("new value in left is: " + value);
                addedLeftValues.push(value);
                $("#txtLeft").val(function (i, v) {
                    arr.push(addedLeftValues);
                });

            }
        });
        $(newRight).each(function (k, value) {
            if ($.inArray(value, right) == -1) {
                alert("new value in Right is: " + value);
                addedRightValues.push(value);
                $("#txtRight").val(function (i, v) {
                    arr.push(addedRightValues);
                });
            }
        });
    });
});

但是你会在第 54 行和第 64 行遇到一个新错误arr.push(addedRightValues);ReferenceError: arr is not defined

在 fiddlejs 上查看 http://jsfiddle.net/p6MKv/

【讨论】：