Question

我想使用knockout为用户提供有关他们所做选择的简单反馈。

我当前的代码从多选下拉列表中返回VALUE，这对用户没有任何意义。我宁愿显示他们选择的SelectedItem的TEXT。

有什么想法吗？

当前行为（显示VALUE而不是TEXT）位于Fiddle：

HTML：

<select data-bind="selectedOptions: multipleSelectedOptionValues" id="CollectionStatusIds" multiple="multiple" name="CollectionStatusIds" size="5">
<option value="1">ACTIVE</option>
<option value="2">ARRANGEMENT</option>
<option value="23">CONSISTENT PMTS</option>
<option value="9">UNABLE TO CONTACT</option>
</select>

knockout.js

var viewModel = {multipleSelectedOptionValues: ko.observable(),};
ko.applyBindings(viewModel);

Answer 1

我认为你不能用内置的绑定来做到这一点。但你可以这样做（更新小提琴：http://jsfiddle.net/Y4tK2/7/）：

HTML：

<div style="float: left; padding: 2px;">Collection Status:
    <br />
    <select data-bind="selectedOptions: multipleSelectedOptionValues, options:options, optionsText:'name'" id="CollectionStatusIds" multiple="multiple" name="CollectionStatusIds" size="5">
    </select>
</div>
<div style="float: left; padding: 2px;" id="ko-display">
    <div data-bind="text: multipleSelectedOptionValuesDisplay"></div>
</div>

JS：

var VM = function(){
    var self = this;

    self.options = [
         {name:"ACTIVE", value:1},
         {name:"ARRANGEMENT",value:2},
         {name:"ATTY INVOLVEMENT",value:16},
         {name:"BROKEN PROMISE",value:17},
         {name:"CLIENT ISSUE",value:3},
         {name:"CONSISTENT PMTS",value:23},
         {name:"UNABLE TO CONTACT",value:9},
     ];

     self.multipleSelectedOptionValues = ko.observableArray();
     self.multipleSelectedOptionValuesDisplay = ko.computed(function(){
        return ko.utils.arrayMap(self.multipleSelectedOptionValues(), function(val){
            console.log(val);
            return val.name;
        });
     }, self);
}

 ko.applyBindings(new VM());

另请注意，self.multipleSelectedOptionValues应该是observableArray，而不是可观察的。

Answer 2

我不认为KnockoutJS如何与select一起工作..彻底检查example in documentation
您首先需要使用选择选项声明observableArray并将所选选项绑定到observable对象..

<强>样本 的

 var viewModel = {
     items: ko.observableArray([{
         value: 1,
         text: 'ACTIVE'
     }, {
         value: 2,
         text: 'ARRANGEMENT'
     }, {
         value: 16,
         text: 'ATTY INVOLVEMENT'
     }, {
         value: 17,
         text: 'BROKEN PROMISE'
     },

     {
         value: 3,
         text: 'CLIENT ISSUE'
     }, {
         value: 23,
         text: 'CONSISTENT PMTS'
     }, {
         value: 9,
         text: 'UNABLE TO CONTACT'
     }

     ]),
     multipleSelectedOptionValues: ko.observable(),
 };
 ko.applyBindings(viewModel);

JSfiddle Example

knockout.js从多选下拉菜单返回TEXT而不是VALUE

2 个答案: