Knockout.js - 在下拉菜单中获取文本选择值

Question

我想知道如何获取从下拉菜单中选择的 TEXT 的值，只要记住我的下拉菜单具有固定数据并且不是由“ko.observableArray()”填充的。有什么想法吗？

当我选择想要拥有的选项时：值和文本选择。

<p>
    Select a car:
    <select data-bind="value: selectedValue, optionsText:???">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
</p>

<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>

我的视图模型：

var viewModel = {
      selectedValue : ko.observable(),
      selectedText :  ko.observable()
};

ko.applyBindings(viewModel);

看到这个小提琴：JSFiddle

Answer 1

这是我的解决方案，在 js 文件中定义一个变量，如 selectedValue（它是可观察的），然后用这个项目装饰你的选择。

 <select data-bind="options: listOfData, 
optionsText: function (item) { return item.propertyForText; }, optionsValue: 
function(item) { return item.propertyForValue; }, 
value: selectedValue">
</select>

Answer 2

我刚刚实现了这一点，我添加了一个 ko.computed 函数来从以下选项中检索选定的文本：

// assume that options has been populated with Key / Value pairs
self.options = ko.observableArray([]);

self.selectedType = ko.observable(null);
self.selectedTypeText = ko.observable(null);
self.selectedType.subscribe(function (newValue) {
    if (newValue) {
        self.checkAccess(newValue);

        $.each(self.options(), function (i, item) {
            if (item.Key === newValue) {
                self.selectedTypeText(item.Value);
            }
        });
    }
});

Answer 3

我不知道 Knockout.js 是否有可能的解决方案。我给你两个可能的解决方案：

解决方案 1

您可以使用一点原生 Javascript 来实现您的目标：

viewModel.selectedValue = ko.observable();
viewModel.selectedText = ko.computed(function () {
    var elem = document.querySelector("select option[value=" + viewModel.selectedValue() + "]");
    return elem && elem.innerHTML;
});

如您所见，您可以获取“值”并使用它来返回满足您要求的 DOM 元素。当然，如果需要，您可以将select 替换为 id。

检查 this fiddle 以查看它是否正常工作。

解决方案 2

执行此操作的 Knockout 方法是使用一个包含所有要填充的元素的数组：

var cars = [{ id: 'volvo', name: 'Volvo' }, { id: 'saab', name: 'Saab' }, { id: 'mercedes', name: 'Mercedes' }, { id: 'audi', name: 'Audi' }];

之后，这取决于你说“value”时需要什么，记住你是在绑定一个对象，而不是一个键/值列表：

HTML：

<select data-bind="options: cars, value: selectedCar, optionsText: 'name'"></select>

还有你的 JS：

selectedCar = ko.observable();
selectedValue = ko.computed(function () { 
    return selectedCar() && selectedCar().id; 
});
selectedText =  ko.computed(function () { 
    return selectedCar() && selectedCar().name; 
});

这样你就可以将你的“值”和你的“文本”（更好地称为id 和name 属性）分成两个计算的observables。

见the fiddle working。

Answer 4

您必须为此使用选项绑定。就像Jeff 所说，不要滥用。

var viewModel = {
      selectedValue : ko.observable(),
      selectedText :  ko.observable(),
    carOptions : ['Volvo','Saab', 'Mercedes', 'Audi']
};

ko.applyBindings(viewModel);

标记：

<p>
    Selecte a car:
    <select data-bind="value: selectedValue, options: carOptions">

    </select>
</p>

<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>

这是最简单的方法。对于更复杂的场景，请访问docs。

JsFiddle 1, JsFiddle 2