$(document).ready(function () {
    $('#state').change(function () {
       var state_id = $('#state').val();
       $(document).find('#districts').val('');
       
       if (state_id != '') {
          $.ajax({
             url: BASE_URL+"user/fetch_district",
             method: "POST",
             data: {
                state_id: state_id
             },
             dataType:'json',
             success: function (data) {
                var  html;
                  if(data.length > 0){
                      html  = data.map((item) => {
                        return `<option value="${item.id}">${item.name}</option>`;
                     })
                  }else{
                     html = '<option value="">Select District</option>';
                  }
                  html = Array.isArray(html) ? ['<option value="">Select District</option>',...html] : html;
               // console.log(html);
                $('#district').html(html);
             }
          });
       } else {
          $('#district').html('<option value="">Select City</option>');
       }
    });

 });