Question

我正在使用jQuery将项目从一个列表框移动到另一个列表框，使用＆＃34; Add＆＃34; /＆＃34;删除＆＃34;按钮＆＃39;点击活动。在屏幕上我可以看到项目移动但是当我在代码中放置一个断点并在移动完成后检查内容时，我看不到移动的项目。这影响了服务器端处理，因为我无法获得正确的数据。

<div class="row" id="zip">
    <div class="col-sm-10 col-sm-offset-2" style="padding-left: 0px;">
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="lbxUnassignedZips">All ZIPs</label>
                    <asp:ListBox runat="server" ID="lbxUnassignedZips" ClientIDMode="Static"></asp:ListBox>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group center-block text-center" style="margin: 0 -20px;">
                    <div class="form-group center-block" style="padding-top: 70px">
                        <button id="btnAddZip" type="submit" class="btn btn-default btn-block">Add&nbsp; <i class="fa fa-angle-double-right"></i></button>
                        <button id="btnRemoveZip" type="submit" class="btn btn-default btn-block"><i class="fa fa-angle-double-left"></i>&nbsp; Remove</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="lbxAssignedZips">Assigned ZIPs</label>
                    <asp:ListBox runat="server" ID="lbxAssignedZips" ClientIDMode="Static"></asp:ListBox>
                </div>
            </div>
        </div>
        <!--/.row -->
    </div>
</div>
<button id="btnSubmit" class="btn btn-primary" aria-hidden="true" aria-label="Submit">Submit</button>

的javascrip / jQuery的

$(document).ready(function () {
    ....
    $('#btnAddZip').click(function () {
        var selectedOptions = $('#lbxUnassignedZips option:selected');

        if (selectedOptions.length == 0) {
            alert("Please select option to move");
            return false;
        }
        $('#lbxAssignedZips').append($(selectedOptions).clone());
        $(selectedOptions).remove();
        return false;
    });
// When I examine lbxUnassignedZips content after I moved one item to it using 
// this function, it still lists old items only!
    $('#btnRemoveZip').click(function () {
        var selectedOptions = $('#lbxAssignedZips option:selected');

        if (selectedOptions.length == 0) {
            alert("Please select option to move");
            return false;
        }
        $('#lbxUnassignedZips').append($(selectedOptions).clone());
        $(selectedOptions).remove();
        return false;
    });
});

$(document).on("click", "#btnSubmit", function (event) {debugger
    var isValid = validateUpdateSubmit();

    if (isValid) {
        var assignedZips = $('#lbxAssignedZips option').not('option:eq(-1)').map(function () {
            return this.innerHTML;
            }).get().join(',');

        // does not show newly added item
        var unassignedZips = $('#lbxUnassignedZips option').not('option:eq(-1)').map(function () {debugger
            return this.innerHTML;
            }).get().join(',');
        __doPostBack('btnubmit', "SaveUpdate");
        $('#editModal').modal('hide');
    }
    else
        return false;
});

Answer 1

请查看下面的代码。我已经更改了一些jQuery代码，现在你将拥有所有列表框项目

$(document).on("click", "#btnSubmit", function (event) {
    var isValid = validateUpdateSubmit();

        if (isValid) {

            var assignedZips = [];

            $('#lbxUnassignedZips').children("option").each(function () {
                var $this = $(this);
                assignedZips.push($this.text() + "," + $this.val());
            });

            alert("AssignedZips  => " + lbxUnassignedZips.join());

            var lbxUnassignedZips = [];

            $('#lbxUnassignedZips').children("option").each(function () {
                var $this = $(this);
                lbxUnassignedZips.push($this.text() + "," + $this.val());
            });

            alert("AssignedZips  => " + lbxUnassignedZips.join());


        __doPostBack('btnubmit', "SaveUpdate");
        $('#editModal').modal('hide');

    }
    else
        return false;
        });

jQuery - 无法访问从一个列表框移动到另一个列表框的项目

1 个答案: