Knockout javascript data-bind下拉列表

knockout javascript data-bind dropdown list

本文关键字：下拉列表 data-bind javascript Knockout      更新时间：2023-09-26

几天来，我开始使用knockout javascript和bootstrap。我想添加一些元素到一个下拉列表，从数据库元素，并获得id(数据库)为点击搜索其他数据。我添加来自控制器的数据:

success: function (data) {
            if (data != null) {
                $.each(data, function (index, element) {
                    document.pvm.CartLst.push({ Id: element.ID, Name: element.ShortName });
                });
            }
        }

我将这些数据添加到下拉列表中:

_mVM.Averagepace = function (item, event) {
        var element = {cartlist: document.pvm.CartLst()}; 
        var rvm = new panelViewModel(element);
        _mVM.rapArray.push(rvm);
    }

在。cshtml中我有这个:

<ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenu6" data-bind="foreach: cartlist">
<li data-bind="click: document.pvm.changeSelC"><a href="#"><b data-bind="text: $data"></b></a></li></ul>

当选择改变时，它调用:

_mVM.changeSelC = function (item, event) {
            //get the id of the selected cart from the dropdownlist
            }

问题是，在我的下拉菜单中出现了一个"[object object]"列表，但它必须只显示CartLst中的名称。当选择更改时，在_mVM.ChangeSelC中获取该名称后面的id。我已经寻找了不同的解决方案，但没有一个对我有效。如果你能帮我的话，我会很感激的。

这就是你通常如何在KnockoutJS下拉菜单中获得" [object Object] ":

ko.applyBindings({ availableItems: [{Id: 1, Name: 'some item'}] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: availableItems"></select>

如果你仔细想想，这实际上是合乎逻辑的:option被绑定到数组中的对象。您已经暗示了这一点:您需要告诉Knockout使用项目的name属性来显示option。这在options绑定中有记录，并使用optionsText绑定，如下所示:

ko.applyBindings({ availableItems: [{Id: 1, Name: 'some item'}] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: availableItems, optionsText: 'Name'"></select>

相关文章：