JSFiddle - React, Tailwind, and code Playground

by ult_combo

HTML

<script src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<div id="wrapper">
    <select id="chosen">
        <option value=""></option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
    </select>
</div>
<br>
<button id="reset">Reset</button>

CSS

select { width:200px; }

JavaScript

$('#chosen').chosen();

$('#wrapper').on('change', '#chosen', function() {
    console.log('onchange: ' + this.value);
});

$('#reset').click(function() {
    
    
    $('#chosen_chzn').remove();
    $('#chosen').val('').change().removeClass('chzn-done').chosen();
    
    /*
    $("#chosen").val('').trigger("liszt:updated"); //doesn't work
    //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); //doesn't work either
    console.log('reset: ' + $('option:selected').val());
    */
    
    
});