JSFiddle - React, Tailwind, and code Playground

by DannyEnglander

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen-sprite.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/[email protected]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.proto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.js"></script>
<select id="test" class="chosen-select"> 
  <option>Select1</option> 
</select>

<button class="btn">Click to see selected value</button>

CSS

#test
{
  width:100px;
}

JavaScript

$(".btn").click(function(){
	alert($("#test").val());
});

//first call chosen()
$("#test").chosen();

 var div2=[]; 
 div2.push("<option value='1'>ALL1</option>"); 
 div2.push("<option value='2'>ALL2</option>"); 
 div2.push("<option value='3'>ALL3</option>"); 
 div2.push("<option value='4'>ALL4</option>"); 
 div2.push("<option value='5'>ALL5</option>"); 
 $("#test").html(div2.join('')); 
 
 //this will bind the updates
 $("#test").trigger("chosen:updated");