Question

我想知道如何获取从下拉菜单中选择的TEXT的值，只记得我的下拉菜单中有固定数据并且没有填充＆＃34; ko.observableArray（）＆＃ 34 ;.有什么想法吗？

当我选择想要的选项时：值和文字选择。

<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

我不知道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。

检查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属性）分别放入两个计算的可观察对象中。

请参阅the fiddle working。

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

您必须使用选项绑定。和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

Answer 4

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

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

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

4 个答案: