JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<button type='button' id='tab1b'>Tab1</button>
<button type='button' id='tab2b'>Tab2</button>
<br>
<br>
<div id='tab1' style='display:block'>
<select class="chosen" style="width:350px;" tabindex="1">
<option value=""></option>
<option value="001">Option 1</option>
<option value="002">Option 2</option>
<option value="003">Option 3</option>
<option value="004">Option 4</option>
<option value="005">Option 5</option>
</select>
</div>
<div id='tab2' style='display:none'>
<select class="chosen" style="width:250px;" tabindex="2">
<option value=""></option>
<option value="006">Option 6</option>
<option value="007">Option 7</option>
<option value="008">Option 8</option>
<option value="009">Option 9</option>
<option value="010">Option 10</option>
</select>
</div>
JavaScript
$(function () {
$("#tab1b").click(function () {
$("#tab1").css("display", "block");
$("#tab2").css("display", "none");
});
$("#tab2b").click(function () {
$("#tab2").css("display", "block");
$("#tab1").css("display", "none");
if (!$("#tab2").data("chosen-already-initialized")) {
$("#tab2").data("chosen-already-initialized", true);
console.log("initializing chosen for tab2 ...");
$("#tab2 .chosen").chosen({
no_results_text: "Oops, nichts gefunden!",
allow_single_deselect: true,
search_contains: true,
disable_search_threshold: 10,
placeholder_text_single: 'Bitte wählen...'
});
}
});
$("#tab1 .chosen").chosen({
no_results_text: "Oops, nichts gefunden!",
allow_single_deselect: true,
search_contains: true,
disable_search_threshold: 10,
placeholder_text_single: 'Bitte wählen...'
});
});