无法绑定从列表框中选择的值

Niko Gamulin 发表于 Dev

尼可·加慕林

我试图创建一个双列表框，将项目从一个移到另一个，然后最终将列表中的数据传递回控制器。

作为一名JavaScript新手，我正在努力进行数据绑定。要将数据从一个列表框移动到另一个列表框，我创建了以下表单：

 <div class="container">
            <form role="form">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="SelectLeft">User Access:</label>
                        <select class="form-control" id="SelectLeft" multiple="multiple" data-bind="options : ownership, optionsText:function(item) { return item.FirstName + ' ' + item.LastName}, value:selectedItem">
                            @*<select class="form-control" id="SelectLeft" multiple="multiple">
                        </select>
                    </div>
                </div>   
                <div class="col-md-2">

                        <div class="btn-group-vertical">
                            <input class="btn btn-primary" id="MoveLeft" type="button" value=" << " data-bind="click: addItem" />
                            <input class="btn btn-primary" id="MoveRight" type="button" value=" >> " data-bind="click: removeSelected" />       
                        </div>

                </div>
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="SelectRight">Owners:</label>
                        <select class="form-control" multiple="multiple" id="SelectRight" data-bind="options : availableOwners, optionsText:function(item) { return item.FirstName + ' ' + item.LastName}, value:selectedItem">
                        </select>
                    </div>
                </div>

            </div>                
        </div>
                <button type="submit" class="btn btn-default" value="Cancel" name="addEditUser" id="btnCancel" data-bind="click: cancel">Cancel</button>
                <button type="submit" class="btn btn-default" value="Submit" name="addEditUser" id="btnSubmit" data-bind="click: submit">Save</button>
    </form>
</div>

<script>
    var data=@(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
    var owners = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.AccessOwners));
    var availableOwners = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.owners));
    function viewModel() {
        this.username=ko.observable(data.Username);
        this.password=ko.observable(data.Password);
        this.email=ko.observable(data.Email);
        this.isActive=ko.observable(data.IsActive);
        this.userId = ko.observable(data.UserId);
        this.ownership=ko.observable(owners);
        this.availableOwners = ko.observable(availableOwners)
        this.selectedItem = ko.observable();

        this.submit = function()
        {
            $.ajax({
                url: '@Url.Action("UserSave", "Admin")',
                type: 'POST',
                data: ko.toJSON(this),
                contentType: 'application/json',
            });
            window.location.href = url;
            return false;
        }

        this.cancel = function()
        {
            window.location.href = url;
            return false;
        }

        this.addItem = function () {
            if ((this.selectedItem() != "") && (this.ownership.indexOf(this.selectedItem()) < 0))
            {
                // Prevent blanks and duplicates
                this.ownership.push(this.selectedItem());
                this.availableOwners.removeAll(this.selectedItem());
            }
            this.selectedItem(""); // Clear the text box
        };

        this.removeSelected = function () {
            if ((this.selectedItem() != "") && (this.availableOwners.indexOf(this.selectedItem()) < 0))
            {
                this.ownership.removeAll(this.selectedItems());
                this.availableOwners.push(this.selectedItem());
            }
            this.selectedItem("");
        };

        this.sortItems = function() {
            this.ownership.sort();
            this.availableOwners.sort();
        };
    };
ko.applyBindings(new viewModel());
var url = $("#RedirectTo").val();

当我按下按钮MoveLeft或MoveRight时，出现以下错误：

Uncaught TypeError: undefined is not a function 
    (anonymous function) 
    jQuery.event.dispatch 
    elemData.handle

有谁知道如何将选定的值从列表框中传递给addItem或removeItem函数，以便从列表所有权中添加或删除对象？

谢谢！

超酷

好吧，niko继续使用Javascript会特别有趣，尤其是使用ko

我分叉了一些代码，使您可以更好地理解它们。

除了亲爱的原因Wayne Ellery外，您还缺少一些其他东西，例如selectedOptions当您有机会选择多个列表项时必须使用的东西

您给我们的错误undefined is not a function是因为您正在选择多个列表项并尝试推送它，这与ko推送的工作方式并不完全相同，而是您必须循环遍历并执行此操作。

在这里查看selectedOptions文档

拥有小提琴权总是一件好事。在这里，我们去检查工作小提琴这里

无需像您给出的那样做其他逻辑，因为click它可以用简单易读的方式完成

查看模型：

    var vm=function() {
    var self=this;
    //observable's declaration    

    self.addItem = function () {
    ko.utils.arrayForEach(self.selectedItem1(),function(item){
    self.availableOwners.push(item);
        self.ownership.remove(item);
    });
    }

    self.removeSelected = function () {
    ko.utils.arrayForEach(self.selectedItem2(),function(item){
    self.ownership.push(item);
    self.availableOwners.remove(item)
    });
    };

};
ko.applyBindings(new vm());

看法：

<select  multiple="multiple" data-bind="options : ownership, optionsText:function(item) { return item.FirstName() + ' ' + item.LastName()}, selectedOptions:selectedItem1"></select>

 <input class="btn btn-primary" id="MoveLeft" type="button" value=" << " data-bind="click:removeSelected,enable:selectedItem2"  />

关于此的任何问题都归给我们。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。