JSFiddle - React, Tailwind, and code Playground

by jgarrido

HTML

<script src="http://harvesthq.github.com/chosen/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<select id="court" name="court" class="chosen" data-placeholder="--- Type Court Name ---" placeholder="--- Type Court Name ---">
    <option value=""></option>
</select>


<input id="button" type="button" value="click me" style="float: left; clear: both;" />

CSS

.chzn-container { width: 200px !important; }
.chzn-drop { width: 198px !important; }
.chzn-container-single .chzn-search input { width: 163px !important; }

JavaScript

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

$('#button').click( function() {

    var yar = '<option value=""></option><option value="first">item1</option><option value="second">item2</option><option value="third">item3</option>';

    
    $('#court').chosen().html(yar).trigger('liszt:updated');
});