JSFiddle - React, Tailwind, and code Playground

by Aminul Islam

HTML

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
 <select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select-width" tabindex="16" id="test">
            <option value="" disable></option>
            <option value="3">American Black Bear</option>
            <option value="4">Asiatic Black Bear</option>
            <option value="5">Brown Bear</option>
            <option value="6">Giant Panda</option>
            <option value="7">Sloth Bear</option>
            <option value="8">Sun Bear</option>
            <option value="9">Polar Bear</option>
            <option value="10">Spectacled Bear</option>
          </select>
<br><br>
<button id="s-all">select all</button>
<button id="c-all">clear all</button>
<div id="selectedlist"></div>

CSS

#selectedlist { border: solid 1px #eee; margin-top:20px; padding:10px}
#selectedlist span{width: 100%; float: left;}

JavaScript

var config = {
          '.chosen-select-width'     : {width:"75%"}
        }
        for (var selector in config) {
          $(selector).chosen(config[selector]);
        }
    
    $(document).ready(function(){
        
        $("#test").change(function(){
            var a = $("#test :selected").text();
            $("#selectedlist").html(a);
        });
        
        $("#s-all").click(function(){
            
            var a = $("#test option");
            
            $.each( a, function( i, val ) {
                $(val).change();
            });
            
            var b = $("#test option").text();
            $("#selectedlist").html(b);
    
        });
        
        $("#c-all").click(function(){
            
            $("#test option:selected").removeAttr("selected");
            
            var a = $("#test :selected").text();
            $("#selectedlist").html(a);
            $(".chosen-choices").find("li.search-choice").remove();
            
        });
        
    });