jquery - Auto populate select fields in a PHP form with a drop down selection -

i use bootstrap , ci. created form contain 2 drop down retrieves data mysql.

i have tb_sekolah table id, kota, nama, provinsi , status_sekolah column names.

i did show data kota in tb_sekolah table in first dropdown. problem is, show data nama in second dropdown. if user select data in first dropdown second dropdown show data nama.

example: column kota has data such yogyakarta, bantul, , sleman. column nama has data such sma 1 yogyakarta, sma 3 yogyakarta, sma 1 sewon, sma 1 sleman. if user selects yogyakarta in first dropdown second dropdown shows sma 1 yogyakarta , sma 3 yogyakarta

firstly have disable second dropdown , have write jquery/javascript function invokes on change event ie, when first dropdown selected.

$('#select').on('change',function(){      var value = $(this).text();     $.ajax({         url: "url goes here",         data: value     }).done(function(data) {         $('#seconddropdown').removeclass('disabled');         $('#firstdropdown').html(data);     });  }); 

the url must point controller function query , send related dropdown options in html format.

foreach ($options $option) {         $string = $string.         "<option value=$option->name>$option->name</option>";  }