JSFiddle - React, Tailwind, and code Playground

by meatHucker

HTML

<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen/chosen.jquery.js"></script>
<select multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button class="chosen-toggle select">Select all</button>
<button class="chosen-toggle deselect">Deselect all</button>

CSS

select{width:400px}

JavaScript

$('select').prepend('<option class="chosen-toggle select">Select All</option>');
$('select').append('<option class="chosen-toggle deselect">Deselect All</option>');
$('select').chosen();
/*$('.chosen-toggle').click(function(){
    $('option').prop('selected', $(this).hasClass('select')).parent().trigger('liszt:updated');
});*/

//Chosen select/deselct all
$('.select').click(function(){
    event.preventDefault()
    $('option').prop('selected', true);
    $('select').trigger('liszt:updated');
});
$('.deselect').click(function(){
    event.preventDefault()
    $('option').prop('selected', false);
    $('select').trigger('liszt:updated');
    console.log('deselect');
});