Question

我是淘汰赛的新手，并且一直在使用购物车示例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，但这只会导致购物车破坏..

Answer 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
的工作示例

Answer 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>

Knockout Dropdown（选择框）值

2 个答案: