Knockout.js：如何使用下拉选择项和 optionsValue 参数？答案

【问题标题】：Knockout.js: How to use the dropdown selected item and optionsValue parameter?Knockout.js：如何使用下拉选择项和 optionsValue 参数？
【发布时间】：2021-01-06 07:00:47
【问题描述】：

我想在列表中添加可编辑的下拉菜单。在其中一个下拉列表中，每次更改值时，我都需要对另一个值（在代码的该部分之外）执行更新。要执行该更新，我需要使用行对象内的值（下面代码中的“项目”）和所选下拉对象内的值。

<tbody data-bind="foreach: { data: quantityList, as: 'item' }">
<tr data-bind="visible: isVisible">
    <td>
        <select data-bind="options: $root.groupList,
            optionsText: 'description',
            optionsValue: 'groupId',
            value: groupId,
            optionsCaption: ''" style="width: 99%; "></select>
    </td>
    <td>

        <select data-bind="enable: options: $root.productList,
            optionsText: 'description',
            optionsValue: 'productId',
            value: productId,
            optionsCaption: '',
            event: { change: function() { $root.updateGrade(item, $index(), productId) } }" style="width: 99%; "></select>
    </td>
</tr>

我的问题是，如果我不使用参数“optionsValue: 'productId'”，当页面加载时，下拉菜单会显示为空。但是完整的下拉对象会在值更改时在我调用的函数中传递（参数“productId”）。另一方面，如果我使用参数“optionsValue：'productId'”，下拉列表将正确填充之前选择的值并存储到数据库中。但是在'updateGrade'函数中，参数'productId'只有一个数字，对应于id。

有什么方法可以在更改事件调用的函数中使用，全选下拉项并在下拉定义中保留参数'optionsValue'？

问候。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

当您不提供optionsValue 选项时，您的下拉菜单绝对不能为空。您可以像现在一样绑定到change 事件，或者您也可以订阅保存选择值的可观察对象。

在这里查看我的小提琴，这一切正常：https://jsfiddle.net/thebluenile/jtbumgc3/

【讨论】：