Select 2 multiselect 2

by niki4810

HTML

<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<script src="http://ivaynberg.github.com/select2/select2-3.2/select2.js"></script>
<h3><b>Steps to Reproduce</b></h3>
<hr/>
<ul>
    <li>1) Click the update options button</li>
    <li>2) Notice that the options are added but the place holder does not get cleared</li>
    <li>NOTE: we are able to select/unselect the added options.</li>
</ul>  
<hr/>
<input type='hidden' id='selectComp' style='width:300px'/> 


<button id="updateOptions">Update options</button>

JavaScript

var options = [
    {
    id: 1,
    text: {
        displayName: "Test1"
    }},
{
    id: 2,
    text: {
        displayName: "Test2"
    }},
{
    id: 3,
    text: {
        displayName: "Test3"
    }},
{
    id: 4,
    text: {
        displayName: "Test4"
    }}
];

var format = function(item) {
    return item.text.displayName;
};

$("#selectComp").select2({
    placeholder: "Select...",
    multiple: true,
    data: options,
    formatResult: format,
    formatSelection: format
});

$("#updateOptions").click(function() {
    //updating the options array by adding an new object 
    options.push({
        id: 5,
        text: {
            displayName: "Test15"
        }
    });
    //calling the data function of select 2.
    $("#selectComp").select2("data", options);
});