Wednesday, July 16, 2014

How to use select2 to create a multiple item selector

How to use select2 to create a multiple item selector

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.js" type="text/javascript"></script> 
 
<input type="hidden" id="e2"/>
<input type="button" value="Go" id="btnGO"/> 
 
<script type="text/javascript">
    container.Content.find("#e2").select2({
        createSearchChoice: function (term, data) {
            if ($(data).filter(function () {
                                return this.text.localeCompare(term) === 0;
                            }).length === 0) {
                return {
                    id: term,
                    text: term
                };
            }
        },
        multiple: true,
        width: '400px',
        data: [
            {id: "AL", text: "Alabama"},
            {id: "AK", text: "Alaska"},
            {id: "CA", text: "California"}
        ]
    });
 
    container.Content.find("#btnGO").click(function () {
        console.log("Val=" + container.Content.find('#e2').val());
    });
</script>
 

No comments: