在Knockout.js中获得下拉框更改事件上选择的文本

Get selected text on dropdown change event in Knockout.js

本文关键字:事件 选择 文本 js Knockout      更新时间:2023-09-26

我试图得到选定的索引在下拉框使用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绑定,但没有工作。

如何在subscribe event中选择文本abcd ?

谢谢

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

你可以这样做:

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