Question

我有这样的下拉列表：

                <select data-bind="options: movieInitValues,
                    optionsText: 'Text',
                    optionsValue: 'Value',
                    value: movieSelectedValue" id="movieSelectDDL"></select>

一切正常，但是我想将下拉列表的文本捕获到＆＃34; movieSelectedName＆＃34;模型的属性，以便我以后可以向用户显示一条好消息。这样做是否有淘汰方式？

感谢任何想法。

Answer 1

根据您的代码，movieInitValues中的值看起来像Text属性和Value属性。您已告诉淘汰赛使用Value属性作为movieSelectedValue中使用optionsValue: 'Value'存储的值。

如果您需要Text和Value属性以供其他地方使用，最好让knockout存储您的observable中选择的实际对象，然后使用属性别处。如果删除optionsValue设置，则会存储对象：

<select data-bind="options: movieInitValues,
    optionsText: 'Text',
    value: movieSelected" id="movieSelectDDL"></select>

然后，您可以根据我刚刚创建的更新的movieSelected可观察对象在您的VM上创建两个计算的observable：

vm.movieSelected = ko.observable();
vm.movieSelectedValue = ko.computed(function() { return vm.movieSelected().Value; } );
vm.movieSelectedText = ko.computed(function() { return vm.movieSelected().Text; });

或者只是更新您的其他绑定以直接使用vm.movieSelected().Text和vm.movieSelected().Value。

Answer 2

使用自定义绑定处理程序可以解决问题：

＆＃13;

ko.bindingHandlers.readSelectedText = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();

        $(element).change(function () {
            value($("option:selected", this).text());
        });
    },
    update: function (element, valueAccessor) {
    }
};


var vm = {
    movieInitValues: [ {Text: 'Option 1', Value: '1' }, {Text: 'Option 2', Value: '2' }],
    movieSelectedValue: ko.observable(),
    movieSelectedText: ko.observable(),
};

ko.applyBindings(vm);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select data-bind="options: movieInitValues,
                    optionsText: 'Text',
                    optionsValue: 'Value',
                    readSelectedText: movieSelectedText,
                    value: movieSelectedValue" id="movieSelectDDL"></select>

<div>
    Text: <span data-bind='text: movieSelectedText'></span>
</div>
<div>
    Value: <span data-bind='text: movieSelectedValue'></span>
</div>

＆＃13;

使用KnockoutJS获取下拉文本

2 个答案: