Javascript 使用knockoutjs使用模板中的下拉列表中的选定项更新textarea

我在遍历购物车对象列表时使用了一个淘汰模板。在模板中，我使用名称作为选项文本和选项值填充一个包含所有产品的下拉列表。我想要一个相应的文本区域来填充产品描述，这是下拉列表绑定到的对象上的一个属性。有没有一种方法可以做到这一点，或者我需要使用jQuery？ 谢谢你的帮助

<script type="text/html" id="edit-template">
    <div class="row edit">
        <div class="span3">
            <select data-bind=" options: $root.products, optionsText: 'Name', optionsValue: 'Name', value: Name, optionsCaption: 'Select a Product'"></select>
        </div>
        <div class="span4">
            <!-- This is where I'm not sure what I need to do for this text area -->
            <textarea class="span4" rows="3" data-bind="value: Description"></textarea>
        </div>
        <div class="span1">
            <button class="btn btn-primary" style="margin-top:20px;" data-bind="click: $root.save">Save</button>
        </div>
    </div>
</script>

拯救

更新 这是一本书。 在本例中，我希望看到文本框用名称更新，文本区域用描述更新。 所以完全公开，我的应用程序实际上与购物车无关，但我尝试了 将此问题简化为购物车示例，以便读者不必了解应用程序的业务领域知识

更新2

---

对小提琴做了一些小改动

这应该可以做到：

确保您有一个

ko.observable

，可以保存所选项目并将其连接到所选元素：

<select data-bind="options: $root.products, optionsText: 'Name', value: selectedProduct, optionsCaption: 'Select a Product'"></select>

然后可以在其他控件中使用选定项的属性：

<input type="text" data-bind="value: selectedProduct() ? selectedProduct().Name : ''"/>

如果您能将您的模型包括在内，那将很有帮助。你有没有可能做一把小提琴？我认为你想做的很容易实现。

$root

在这里听起来有点不寻常。我希望有一个

$data

。如何使用模板？提琴肯定会有帮助的。当然，我用提琴更新了问题。另外，正如@Andreas所指出的，

$root

的使用可能看起来有些可疑，但实际的应用程序要复杂一些，我必须按原样处理视图模型。我已经尝试过重构它，并被告知将其放回原处。谢谢@mhu，效果很好+1的解决方案，很容易适应我的实际情况，而不仅仅是示例小提琴。