MultiSelect canjs Map load options - state

by neildcruz19

HTML

<script src="http://canjs.com/release/2.1.4/can.jquery.js"></script>
<script id="multiSelectTemplate" type="text/stache">
    <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>

<div class="selectContainer">
</div>

CSS

select{
    width:300px;
}

JavaScript

var selectControlInst = null;

var selectControl = can.Control({
},{
    init : function ( element, options) {
        var template = 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');
});