Bootstrap Select plugin: deselect issue <p>I am using Bootstrap framework with the <a href="http://silviomoreto.github.io/bootstrap-select/" rel="nofollow">Bootstrap Select</a> plugin.</p> <p>This is a regular select tag, not multiple, here is the code I used:</p> <pre><code>&lt;select class="selectpicker show-tick" name="main_course_select" id="main_course_select" title="main" data-style="btn-primary" data-width="100%"&gt; &lt;?php echo get_food($mysqli,'main'); ?&gt; &lt;/select&gt; </code></pre> <p>Where <code>get_food()</code> function simply prints <code>&lt;option&gt;</code> tags with values from the MySQLi database.</p> <p>When I first click an <code>option</code> I can see it is ticked just fine, when I click the same option again I want the option to be deselected, why is this not a default feature is beyond me and I don't like to use multiple select to achieve this. Anyone have any idea on how to get this done?</p> <p>Here is the problem reproduced:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() { $('.selectpicker').selectpicker(); });</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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/js/bootstrap-select.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.3/css/bootstrap-select.css"&gt; &lt;select class="selectpicker show-tick" name="main_course_select" id="main_course_select" title="main" data-style="btn-primary" data-width="100%"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;/select&gt;</code></pre> </div> </div> </p>