MultiSelect canjs Map load options
HTML
<script src="http://canjs.com/release/2.1.4/can.jquery.js"></script>
<script id="multiSelectTemplate" type="text/mustache">
<select id="s2" class="multipleSelect" can-value="selectedOptions" multiple="multiple" size="5">
{{#options}}
<option value="{{value}}">{{display}}</option>
{{/options}}
</select>
</script>
<div id="selectContainer">
</div>
CSS
select{
width:300px;
}
JavaScript
var selectControlInst = null;
var selectControl = can.Control({
},{
init : function ( element, options) {
var sdata1 = 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'
}]
});
var soptions = ['option1','option2'];
var 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'
}];
var sdata = new can.Map({
'selectedOptions': soptions,
'options': options
});
var frag = can.view('multiSelectTemplate', sdata);
// alert(can.view.render('multiSelectTemplate', sdata));
$( element ).html(frag);
//sdata.attr('selectedOptions',['option1','option4']);
//sdata.attr('options', options);
}
});
$(function(){
selectControlInst = new selectControl('#selectContainer');
});