JSFiddle - React, Tailwind, and code Playground

by iminfo

HTML

<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<div class="well">
    <b>  Normal :</b>
<select id="ddlCars" multiple="multiple">
<option value="Accord">Accord</option>
<option value="Duster">Duster</option>
<option value="Esteem">Esteem</option>
<option value="Fiero">Fiero</option>
<option value="Lancer">Lancer</option>
<option value="Phantom">Phantom</option>
</select>
</div>

<div class="well">
    <b> Show selected text only for 2 items :</b>
<select id="ddlCars1" multiple="multiple">
<option value="Accord">Accord</option>
<option value="Duster">Duster</option>
<option value="Esteem">Esteem</option>
<option value="Fiero">Fiero</option>
<option value="Lancer">Lancer</option>
<option value="Phantom">Phantom</option>
</select>
</div>
<div class="well">
    <b> With select all and filter:</b>
<select id="ddlCars2" multiple="multiple">
<option value="Accord">Accord</option>
<option value="Duster">Duster</option>
<option value="Esteem">Esteem</option>
<option value="Fiero">Fiero</option>
<option value="Lancer">Lancer</option>
<option value="Phantom">Phantom</option>
</select>
</div>
<div class="well">
    <b> With Custom Placehoder Text:</b>
<select id="ddlCars3" multiple="multiple">
<option value="Accord">Accord</option>
<option value="Duster">Duster</option>
<option value="Esteem">Esteem</option>
<option value="Fiero">Fiero</option>
<option value="Lancer">Lancer</option>
<option value="Phantom">Phantom</option>
</select>
</div>

JavaScript

$(document).ready(function() {
     $('#ddlCars').multiselect();
      $('#ddlCars1').multiselect({ 
         numberDisplayed: 2,
          
     });
       $('#ddlCars2').multiselect({ 
         includeSelectAllOption: true,
           enableFiltering:true         
           
     });
        $('#ddlCars3').multiselect({  
           nonSelectedText :'Select Cars'
           
     });
});