knockout.js 从多选下拉列表中返回 TEXT 而不是 VALUE答案

【问题标题】：knockout.js Return TEXT from multiselect dropdown instead of VALUEknockout.js 从多选下拉列表中返回 TEXT 而不是 VALUE
【发布时间】：2013-11-09 22:14:14
【问题描述】：

我想使用敲除功能向用户提供有关他们所做选择的简单反馈。

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

有什么想法吗？

当前行为（显示 VALUE 而不是 TEXT）在 Fiddle 中：

http://jsfiddle.net/Y4tK2/

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);

【问题讨论】：

标签： knockout.js

【解决方案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，而不是 observable。

【讨论】：

【解决方案2】：

我不认为 KnockoutJS 如何与 select..knidly 检查 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

【讨论】：