Question

我已经开始使用淘汰赛javascript和bootsrap了几天。我想在下拉列表中添加一些元素，从数据库添加元素，并获取被点击的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

            }

问题是在我的下拉列表中出现了一个＆＃34; [object Object]＆＃34;但它必须只显示CartLst中的名称。当选择更改为在_mVM.ChangeSelC中获取该名称后面的id时。我已经搜索了不同的解决方案，但没有任何方法可以帮助我。如果你可以帮助我，我会很感激。

Answer 1

这就是你通常得到的方式＆＃34; [object Object]＆＃34;在KnockoutJS的下拉列表中：

＆＃13;

ko.applyBindings({ availableItems: [{Id: 1, Name: 'some item'}] });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: availableItems"></select>

＆＃13;

如果你考虑一下，这实际上是合乎逻辑的：option被绑定到数组中的对象。您已经提到过：您需要告诉Knockout使用项目的name属性来显示option。这是documented in the options binding，并使用optionsText绑定，如下所示：

＆＃13;

ko.applyBindings({ availableItems: [{Id: 1, Name: 'some item'}] });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: availableItems, optionsText: 'Name'"></select>

＆＃13;

淘汰javascript数据绑定下拉列表

1 个答案: