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="!!EMPTY 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").val('').trigger("liszt:updated"); //doesn't work
    //$("#chosen").prop('selectedIndex', 0).trigger("liszt:updated"); //doesn't work either
    console.log('reset: ' + $('option:selected').val());
});