如何使用 Knockout 从下拉列表中获取所选值

Question

这是视图模型

 self.choiceSelect = ko.observable();
            self.selectedItems = ko.observableArray([]);
            self.selectedComponent = ko.observable();
            self.componentList = ko.observableArray();

 self.GetData = function () {

            $.ajax({
                url: self.url + "GetComponent",
                type: "GET",
                cache: false
            })
            .fail(function (qxhr, status, errorThrown) {

            })
            .done(function (data) {

                self.componentList(data);

            });

        };

这是代码：

<select id="report-Components" data-bind="value: selectedComponent, options: componentList, optionsText: 'componentName'"></select><br /><br />
<h4>Component Attributes</h4>
<!-- ko if: selectedComponent  -->
<!-- ko if: selectedComponent().componentField  -->
<div data-bind="foreach: selectedComponent().componentField">
    <div class="control-group">
        <div class="controls">
            <input type="checkbox" data-bind="checked: $parent.selectedItems, value: $data" />
        </div>
        <label class="control-label">
            <strong data-bind="text: fieldText"></strong>
        </label>
    </div>                                    
</div>
<!-- /ko -->                            
<!-- /ko -->
<!-- ko if: selectedItems  -->
<div data-bind="foreach: selectedItems">
    <!-- ko if: fieldChoice.length > 0  -->
    <label data-bind="text: fieldText"></label>
    <select data-bind="options: fieldChoice, optionsText: 'choiceName', value: $data.choiceSelect"></select>
    <!-- /ko -->
    <!-- ko if: fieldChoice.length == 0  -->
    <label data-bind="text: fieldText"></label>
    <input type="text" value=""/>
    <!-- /ko -->
</div>  
<!-- /ko -->  

Answer 1

您需要将选择值绑定到可观察对象：

<select data-bind="options: fieldChoice, optionsText: 'choiceName', value: $data.nameOfObservable">

这应该会在选择更改时更新 nameOfObservable。

这个 observable 需要位于您正在查看的数组中的每个项目上。因此，无论您在 selectedItems 中存储什么对象，它们都需要具有同名的 observable 属性。

要让视图模型中的所有内容都可观察，我建议使用mapping plugin：

self.componentList = ko.mapping.fromJS(data);

并对视图模型上的其他属性执行相同操作。