Dynamic select with present load

I have 3 related select:

 <label>Country:
            <select style="width: 200px" class="country" class="form-control input-sm" name="country" id="country">
                -
                @foreach($countries as $contry)
                    <option value=""></option>
                @endforeach
            </select>
        </label>
        <label>Region:
            <select style="width: 200px" class="region" name="region" class="form-control input-sm" id="region">  
                <option value=""></option>   
            </select>
        </label>

        <label>City:
            <select id="city" class="city" style="width: 200px" name="city" >
                <option value=""></option>
            </select>
        </label>
        <script >
            $('#country').on('change',function (e) {
         var country_id=e.target.value;
                console.log(country_id);
                //ajax
                //   $('#city').empty();
                $.get('/findRegions?country_id='+country_id,function (data) {
                    $('#region').empty();
                    $('#city').empty();
                    $.each(data,function (index,subcatObj){
                        $('#region').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
                    })
                })
                var region_id=e.target.value;
                console.log(region_id);
                //ajax
                $.get('/findCitys?region_id='+region_id,function (data) {
                    $('#city').empty();
                    $.each(data,function (index,subcatObj){
                        $('#city').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
                    })
                })
            })
            $('#region').on('change',function (e) {
                var region_id=e.target.value;
                console.log(region_id);
                //ajax
                $.get('/findCitys?region_id='+region_id,function (data) {
                    $('#city').empty();
                    $.each(data,function (index,subcatObj){
                        $('#city').append('<option value="'+subcatObj.id+'">'+subcatObj.name+'</option>');
                    })
                })
            })
        </script>

What happens: to select a region, you need to change the country, even if it is already correct. How to preload the required data in Select?

For example: Fefault Country->Russia->Default Region->Karelia->Default City: Petrozavodsk.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2CxG9ol
via IFTTT