JSFiddle - React, Tailwind, and code Playground

by John Doe

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");
});
    
$(".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...'
  });
});