Remove selected option from select2 multiselect on change.
<p>I have the following code. The aim is to style a select2 box with textbox as the searchbox. So I have implemented it as multiselect , but I only want one option to be selected.</p>

<p><em>One option is to restrict using <code>maximumSelectionLength: 1</code>. But in this case the limit message will be shown which i do not want to happen. (Even if i hide it some space will be taken up ).</em></p>

<p><em>Other option is to hide everything other than <code>last-child</code> , in that case multiple values will be send to backend when form is submitted.</em> </p>

<p><strong>So is there a way to remove the currently selected value when the new value is selected in multiselect ?</strong></p>

<p><strong>I'm using select2 version 3.5.2</strong>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#placeSelect').select2({
    width: '100%',
    allowClear: true,
    multiple: true,
    placeholder: "Click here and start typing to search.",
    data: [
            { id: 1, text: "Honolulu"     },
            { id: 2, text: "Tokyo"    },
            { id: 3, text: "Delhi" },
            { id: 4, text: "Zurich"   }
          ]    
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"&gt;&lt;/script&gt;
&lt;link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/&gt;
&lt;h3&gt;Select a value&lt;/h3&gt;
&lt;input type="text" id="placeSelect"/&gt;</code></pre>
</div>
</div>
</p>