淘汰赛下拉（选择框）值答案

【问题标题】：Knockout Dropdown (selectbox) value淘汰赛下拉（选择框）值
【发布时间】：2015-11-05 21:54:55
【问题描述】：

我是淘汰赛新手，一直在玩购物车示例here

我将如何在每一行分配产品下拉列表的值？我希望能够使用 JQuery 选择所选项目的值并保留所有购物车功能。渲染出来的代码如下：

<td>
  <select class="form-control prodName" data-bind="options: $root.sampleProducts, optionsText: "name" , optionsCaption: "Select...", value: product">
    <option value="">Select...</option>
    <option value="">Standard (sandwich)  </option>
    <option value="">Premium (lobster)</option>
    <option value="">Ultimate (whole zebra)</option>
  </select>
</td>

没有价值？？...但我想要：

  <td>
   <select class="form-control prodName" data-bind="options: $root.sampleProducts, optionsText: "name" , optionsCaption: "Select...", value: product">
    <option value="">Select...</option>　　　　　
    <option value="1">Standard (sandwich)</option>　　　　　
    <option value="2">Premium (lobster)</option>　　　　　
    <option value="3">Ultimate (whole zebra)</option>　　　　　
  </select>
</td>

值已呈现，我使用了 optionsValue 但这只会导致购物车损坏..

【问题讨论】：

考虑将其标记为对其他人有帮助的答案

标签： knockout.js knockout-3.0

【解决方案1】：

当您将optionsValue 添加到select 时，这使得下拉列表的value 绑定存储optionsValue 而不是选定的下拉对象（[值，文本]），如果您没有使用optionsValue，则之前发生.

所以你需要相应地修改viewModel

视图模型：

self.subtotal = ko.computed(function() {
        return self.product() ? self.product() * parseInt("0" + self.quantity(), 10) : 0; //self.product has price
    });

查看：

<td class='price' data-bind='with: product'>
  <span data-bind='text: formatCurrency($data)'> </span> //use $data 
</td>

带有完整代码的工作示例here

【讨论】：

超级酷，这几乎是我所需要的（抱歉，我的问题应该更清楚），如果产品对象包含“id”，那么对象将是 {id: 1, name : 'name', price: '5.00'} 如何将 id 放入 value 标签中？
当你使用 optionsText:'price' & optionsValue:'id' 你应该把 id 变成值绑定 observable 。希望有帮助
那仍然不起作用..我仍然希望将名称作为 optionsText...当我尝试时，价格根本不显示，并且小计只添加了 id一起因此打破了购物车.. id 值虽然显示在值标签中.. 但那是因为 optionsValue..
现在我明白了，我误读了您最初的评论。因为您在value 中只能拥有一件事，无论是 id 还是 price 。将id 保留在值标签中，而值标签又用于计算没有意义。最好的方法是不使用 optionsValue 并允许 value 绑定拥有对象，您可以进一步使用它。
还有一个替代方案，因为您有 id 值和 name 文本现在您需要使用 id 查询 observableArray 以获取价格并进行计算。干杯

【解决方案2】：

在尝试了大约 20000 种不同的方法并阅读了可能多次淘汰的文档后，我最终只是添加了一个新列并在其中设置了 id 值（这不是一个真正合适的解决方案，但一个解决方案永远不会少）。如果我以任何方式使用 optionValue 总是会出错，我确实成功地使用自定义函数更新了价格字段，但这反过来又破坏了小计和总计功能。如果有人有兴趣，工作小提琴就在这个here...下面是html的片段：

<tbody data-bind='foreach: lines'> <tr> <td> <select id="mySel" data-bind='options: $root.sampleProducts, optionsText: "name", optionsCaption: "Select...", value: product'> </select> </td> <td class='id' data-bind='with: product'> <span data-bind='text: $parent.getId($data)'></span> </td> <td class='price' data-bind='with: product'> <span data-bind='text: formatCurrency(price)'> </span> </td> <td class='quantity'> <input data-bind='value: quantity, valueUpdate: "afterkeydown"' /> </td> <td class='price'> <input data-bind='value: formatCurrency(subtotal())' /> </td> <td> <a href='#' data-bind='click: $parent.removeLine'>Remove</a> </td> </tr> </tbody> </table>

【讨论】：