I know people has little time nowadays so I'll be quick.

Right now I'm working with a JS script that helps me set State/Cities. The trigger is the change of Counties, that picks up the ID and search it on a DB for it's cities and add them to a new entry in the DB. Now the client needs to edit the entry, and it needs to load the view with the selected State and City.

The problem is that I can't load both combo boxes with its entries from the DB because the cities does not exist (the html version that is) until State triggers it.

$(document).on('change','#especie_cat',function(){
    //console.log("Cambio");

    var especie_cat=$(this).val();
    //console.log(region_cat)
    var div=$(this).parent();
                var op=" ";
    $.ajax({
        type: 'get',
        url: '{!! URL::to('findRaza') !!}',
        data:{'id':especie_cat},
        success:function (data){

            op+='<option value="0" selected disabled>Elija una Raza</option>';
            for(var i=0;i<data.length;i++) {
                op += '<option value="'+data[i].id+'">'+data[i].nombre+'</option>';
            }
            $('#raza_cat').html(" ");
            $('#raza_cat').append(op);
        },
        error:function()
        {

        }
    });
}); 

I'm a newbie regarding JS, so I'm sorry in advance.

The main issue here, along with the problem of not being able to trigger the event, is that the DB only saves the City ID, because the State ID is shown by an SQL statement but is not saved on the table that hold all the data being edited.

Sorry for the rusted English and my lack of knowledge in JS.