JSFiddle - React, Tailwind, and code Playground

by keremcan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-chained/1.0.1/jquery.chained.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<select id="country" name="country">
  <option value="">--</option>
  <option value="1">Yeni zelanda</option>
  <option value="2">Amerika</option>
</select>
<select id="school" name="school">
  <option value="">--</option>
  <option value="1" class="1">3 series</option>
  <option value="2" class="2">5 series</option>
  <option value="2" class="2">6 series</option>
  <option value="2" class="2">A3</option>
  <option value="2" class="2">A4</option>
  <option value="2" class="2">A5</option>
</select>

JavaScript

$("#school").chained("#country");
$('#school,#country').chosen({width: '300px'})

$('#school, #country').on('change', function(){
    $('#school, #country').trigger('chosen:updated');
});