JSFiddle - React, Tailwind, and code Playground

by giuseppe straziota

HTML

<div class="form-group">
                    <span class="label label-default">Country</span>
                                    <select class="form-control"  id="country1">
                                    <div class="form-group">
                                    <span class="label label-default" >Province</span>
                                    <select class="form-control"id="province1">
                                                                            </select>
                                    </div>

JavaScript

function country() {
      $('#country1').empty();
      $('#country1').append("<option> Loading --- </option>");
      $('#province1').append("<option value='0'>--Select Province-- </option>");
      $.ajax({
          type: "POST",
          url: "country_dropdown.php",
          contentType: "application/json; charset=utf-8",
          datatype: "json",
          success: function(data) {
              $('#country1').empty();
              $('#country1').append("<option value='0'>-- Select Country---</option>");
               $.each(data, function(i, item) {
                  $('#country1').append('<option value="' + data[i].CountryID + '">' + data[i].CountryName + '</option>');
              }); 
          } ,
						complete: function() {

          }
      });
  };

  $(document).ready(function() {

      country();

  });

  function province(id) {
      $('#province1').empty();
      $('#province1').append("<option> Loading --- </option>");
       $.ajax({
              type: "POST",
              url: "province_dropdown.php?id=" + id,
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function(data) {
                  $('#province1').empty();
                  $('#province1').append("<option value='0'> --Select Province-- </option>");
                  $.each(data, function(i,item) {
                          $('#province1').append('<option value="' + data[i].ProvinceID + '">' + data[i].ProvinceName + '</option>');
                      });} ,
                      complete: function() {

                      }
              
             } ); 

      };