knockout.js將文本從多選下拉菜單而不是VALUE中輸入

Question

我想使用淘汰賽爲用戶提供他們所做選擇的簡單反饋。

我的當前代碼從多選下拉列表中返回VALUE，這對用戶來說並不意味着什麼。我寧願要顯示他們選擇的SelectedItem的TEXT。

任何想法？

當前行爲（顯示的值不是文本）是在小提琴這裏：

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

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工作..knidly檢查example in documentation
您需要先聲明observableArray與您選擇的選項和所選擇的選項綁定到observable對象..

DEMO

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