title: Show multiple select dropdown with checkboxes value in the text
body: <p>I have a problem to show multiple select dropdown with checkboxes value in the text.</p>
  <p>Below is sample code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
  &lt;select id=&quot;mySelect&quot; multiple class=&quot;form-control&quot;  onchange=&quot;myFunction()&quot;&gt;
   &lt;option value=&quot;&quot; selected&gt;Sila Pilih&lt;/option&gt;
  &lt;option value=&quot;Kakitangan MPK&quot;&gt;Kakitangan MPK&lt;/option&gt;
  &lt;option value=&quot;Ahli Majlis&quot;&gt;Ahli Majlis&lt;/option&gt;
                                  &lt;/select&gt;
  
  &lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;
  
  &lt;script&gt;
  function myFunction() {
    var x = document.getElementById(&quot;mySelect&quot;).value;
    document.getElementById(&quot;demo&quot;).innerHTML = &quot;You selected: &quot; + x;
  }
  
  $('select[multiple]').multiselect({
    columns: 4,
    placeholder: 'Select options'
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  </code></pre>
  <p>Now the output like below the picture:</p>
  <p><a href="https://i.stack.imgur.com/EDOl5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EDOl5.png" alt="Output 1" /></a></p>
  <p>Actually, I want the output like below the picture:</p>
  <p><a href="https://i.stack.imgur.com/IY2cm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IY2cm.png" alt="Output 2" /></a></p>
  <p>Hope someone can guide me to solve this problem. Thanks.</p>