8

我想知道如何获取从下拉菜单中选择的 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

4

4 回答 4

15

我不知道 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属性）分成两个计算的 observables。

看到小提琴工作。

于 2014-12-02T19:17:22.663 回答
3

我刚刚实现了这一点，并且我添加了一个 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);
            }
        });
    }
});
于 2016-01-14T11:29:44.080 回答
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

于 2014-12-02T18:37:28.277 回答
0

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

 <select data-bind="options: listOfData, 
optionsText: function (item) { return item.propertyForText; }, optionsValue: 
function(item) { return item.propertyForValue; }, 
value: selectedValue">
</select>
于 2020-01-27T16:05:46.457 回答