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>

我的ko ViewModel:

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,如果需要,可以用id 替换.

检查这个小提琴是否有效.

解决方案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属性)分别放入两个计算的可观察对象中.

看小提琴工作.

Answer 2

您必须为此使用选项绑定。正如杰夫所说，不要滥用。

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>

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

JsFiddle 1 , JsFiddle 2