0

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

我试过了：

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

但是，这是行不通的。请帮助...谢谢...

4

1 回答 1

1

首先，如果您的用户可以一次选择多个项目，您可能需要考虑多选下拉菜单。KO 将绑定一个选定值的数组，您可以通过简单地连接它们来根据需要进行计算。见这里。

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

像这样的东西：

<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在处理程序中手动订阅和连接。（搜索“显式订阅 observables”）。

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

于 2013-08-02T09:53:30.837 回答