在Knockout.js中的下拉列表更改事件中获取选定的文本

时间:2016-11-09 14:02:22

标签: javascript jquery html knockout.js

我正在尝试使用knockout.js获取所选索引的文本,

以下是我的HTML

<select name="" id="management" class="form-control" data-bind="value: ManagementCompanies,optionText:ManagementCompaniestxt">
<option value="0">---Select---</option>
<option value="1">abcd</option>
<option value="2">efgh</option>
</select>

以下是我的模型绑定:

var FilterViewModel = {
 ManagementCompanies: ko.observable(''),
ManagementCompaniestxt:ko.observable('')
}
FilterViewModel.ManagementCompanies.subscribe(function (newValue) {

    alert(FilterViewModel.ManagementCompaniestxt());

});
ko.applyBindings(FilterViewModel, window.document.getElementById("SelectFilters"));

我也尝试使用Text进行绑定,但是没有用。

如何在abcd中获取选定的文字subscribe event

感谢

1 个答案:

答案 0 :(得分:0)

您尝试从视图中获取数据到视图模型有点奇怪。通常,您的视图是您的viewmodel的表示。最好拥有在模型中呈现<select>所需的数据,并使用knockout options数据绑定来渲染它。

以下是如何做到这一点:

&#13;
&#13;
var FilterViewModel = {
  ManagementCompanies: ko.observable(''),
  ManagementCompaniestxt: ko.observable(''),
  options: [
    { text: "---Select---", value: 0 },
    { text: "abcd", value: 1 },
    { text: "efgh", value: 2 }]
}

FilterViewModel.ManagementCompanies.subscribe(function(newValue) {
  console.log(newValue.text);
});

ko.applyBindings(FilterViewModel);
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="value: ManagementCompanies, 
                   options:options, 
                   optionsText: 'text'">
</select>
&#13;
&#13;
&#13;