Question

我有一个下拉菜单和一个textarea。当我在下拉列表中选择一个值时，它应该将该值添加到文本框中。如果我选择另一个，那么它应该将第二个值连接到文本框中的值（以逗号分隔）。

我试过了：

               <table>
                    <tr>
                        <td>Options:</td>
                        <td>
                            <select data-bind="value:currentSelection">
                                <option value=""></option>
                                <option value="Option 1">Option 1</option>
                                <option value="Option 2">Option 2</option>
                                <option value="Option 3">Option 3</option>
                                <option value="Option 4">Option 4</option>
                            </select>
                        </td>
                    </tr>                        
                    <tr><td>Selected options:</td><td><textarea data-bind='value: selectedOptions' ></textarea></td></tr>

                    <tr><td colspan="2">You have selected:  <span data-bind='text: selectedOptions'> </span></td></tr>
               </table>


 <script type="text/javascript">

 var ViewModel = function () {
     this.currentSelection = ko.observable("Option1");
     this.selectedOptions = ko.computed(function () {
         return this.selectedOptions()+", "+this.currentSelection();
     },this);
 };

 ko.applyBindings(new ViewModel()); 

</script>

但是，这不起作用。请帮忙......谢谢...

Answer 1

首先，如果您的用户可以一次选择多个项目，您可能需要考虑多选下拉列表。 KO将绑定一组选定的值，您可以通过简单地连接它们来完成您想要的计算。请参阅here。

它也会更好，因为您的选项列表不会存在于视图中。

这样的事情：

<select data-bind="options: availableOptions, selectedOptions: selectedOptions" size="4" multiple="true"></select>

<textarea data-bind='value: selectionText' ></textarea>


var ViewModel = function () {
    var self = this;
    self.availableOptions = ko.observableArray(["Option 1", "Option 2", "Option 3", "Option 4"]); 
    self.selectedOptions = ko.observableArray(["Option 1"]);
    self.selectionText = ko.computed(function () {
         return self.selectedOptions().join(',');
     }, self);
 };

如果您不能使用多选列表，则可以手动订阅currentSelection并在处理程序中连接。（搜索“明确订阅可观察者”）。

但是，如果您不断添加当前选定的选项，则最终可能会多次添加相同的值。因此，如果你走这条路线，你应该保留一个单独的唯一值列表（在像对象这样的字典中，如this），并从中计算最终值。

连接KnockoutJS中的值

1 个答案: