I'm having trouble getting the selected values to be rendered using the can-value helper for multi-select inputs.
This problem specifically occurs when the options are rendered dynamically using a can.Map as opposed to having the options available in the DOM.
Here is a fiddle to explain the issue:
http://jsfiddle.net/neildcruz19/ramey3zo/6/
Control
var selectControlInst = null;
var selectControl = can.Control({
},{
init : function ( element, options) {
$( element ).html(can.view('multiSelectTemplate',this.getMap()));
},
getMap : function() {
return new can.Map({
selectedOptions : ['option1','option2'],
options : [{
display :'Option 1',
value :'option1'
},
{
display :'Option 2',
value :'option2'
},
{
display :'Option 3',
value :'option3'
},
{
display :'Option 4',
value :'option4'
},
{
display :'Option 5',
value :'option5'
}]
});
}
});
$(function(){
selectControlInst = new selectControl('.selectContainer');
});
Mustache/HTML
<script id="multiSelectTemplate" type="text/mustache">
<select class="multipleSelect" can-value="selectedOptions" multiple="multiple" size="5">
{{#options}}
<option value="{{value}}">{{display}}</option>
{{/options}}
</select>
<br/>
<br/>
<select class="multipleSelect" can-value="selectedOptions" multiple="multiple" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
</script>
Is there a way I can work around this situation?