State and LGA

state and lga script.js

<select id="state_id"></select>
<select id="lga"></select>

stateList();

function stateList(){
  $.ajax({
            type:'GET',
            url:"http://locationsng-api.herokuapp.com/api/v1/states",
            success:function(data) {
                //retrieved State List from the data object returned
                state = data;
                //initialize LGA into a list
                var stateOptionlist = '<option>Select State</option>';
                //Iterate the list to get the names
                state.forEach(function(state){
                    stateOptionlist +='<option value=' + lga.id + '>' + state.name + '</option> <br>';
                });
                $('#state_id').html(stateOptionlist);
            },
            error:function(data){
                var stateOptionlist = '<option>Couldn\'t retrieve LGA</option>';
                lga = $('#state_id').text(stateOptionlist);
            }
        });
}

$('#state_id').change(function(){
        $this = $(this);
        state = $this.find(":selected").first().attr('value');
        lgaList(state);
});

    function lgaList(state){
        $.ajax({
            type:'GET',
            url:'/register/' + state + '/lgas',
            success:function(data) {
                // //retrieved LGA List from the data object returned
                lgas = data;
                // //initialize LGA into a list
                var lgaOptionlist = '<option>Select LGA</option>';
                // //Iterate the list to get the names
                lgas.forEach(function(lga){
                    lgaOptionlist +='<option value=' + lga.id + '>' + lga.name + '</option> <br>';
                });
                $('#lga').html(lgaOptionlist);
            },
            error:function(data){
                var lgaOptionlist = '<option>Couldn\'t retrieve LGA</option>';
                lga = $('#lga').text(lgaOptionlist);
            }
        });
    }