JSFiddle - React, Tailwind, and code Playground

by Good Muyis

HTML

<script src="https://ajibolaakeemfoundation.org/wp-content/themes/ajibola-akeem/js/jquery.jsonselect.min.js"></script>
<select name="my_select1" id="my_select1" class="form-control" 
data-url="https://ajibolaakeemfoundation.org/wp-content/themes/ajibola-akeem/js/lga_select_data.json" data-autoload="true" data-value="country" data-text="name">
</select>
<h2>Dependent</h2>
<select name="my_select2" id="my_select2" class="form-control" data-url="https://ajibolaakeemfoundation.org/wp-content/themes/ajibola-akeem/js/lga_select_data.json" data-autoload="false" data-parent="#my_select1" data-value="country" data-text="name">
</select>

JavaScript

$(document).ready(function() {
  $("#my_select1, #my_select2").jsonselect({
    empty_text: 'Select Option',
    events: {
      success: function() { console.log('success fired!') },
      beforeSend: function() { console.log('beforeSend fired!') },
      error: function() { console.log('error fired!') }
    }
  });
});