Jquery：选择的选项在渲染选择列表中不起作用

Question

I had a countries/state chained select box pulled from database (rendered select list), however I want the specific option value remain selected when the page is redirected back by certain action. The user input fields are temporarily stored in SESSION, all fields is able to retained the value, excepted Country and State field.

I couldn't find these pulled option tag (which is rendered) appeared in view-sources, but I can view it in Chrome console and Firebug, thus I believe jquery cannot find the particular option value to perform the action, whereas when I hard-code the options, the below script is working:

Append options

function ajaxCall() {
    this.send = function(data, url, method, success, type) {
        type = type||'json';
        var successRes = function(data) {
            success(data);
        };

        var errorRes = function(e) {
            console.log(e);
            alert("Error found 
Error Code: "+e.status+" 
Error Message: "+e.statusText);
        };

        $.ajax({
            url: url,
            type: method,
            data: data,
            success: successRes,
            error: errorRes,
            dataType: type,
            timeout: 60000
        });

    }
}

function locationInfo() {
    //var rootUrl = "http://lab.iamrohit.in/php_ajax_country_state_city_dropdown/api.php";
    var rootUrl = jsbaseurl + '/inc/api-get-location.php';
    var call = new ajaxCall();

    /* disabled get cities
    this.getCities = function(id) {
        $(".cities option:gt(0)").remove();
        var url = rootUrl+'?type=getCities&stateId=' + id;
        var method = "post";
        var data = {};
        $('.cities').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.cities').find("option:eq(0)").html("Select city");
            if(data.tp == 1){
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                    option.attr('value', key).text(val);
                    $('.cities').append(option);
                });
                $(".cities").prop("disabled",false);
            }
            else{
                 alert(data.msg);
            }
        });
    };
*/
    this.getStates = function(id) {
        $(".states option:gt(0)").remove(); 
        $(".cities option:gt(0)").remove(); 
        var url = rootUrl+'?type=getStates&countryId=' + id;
        var method = "post";
        var data = {};
        $('.states').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.states').find("option:eq(0)").html("Select state");
            if(data.tp === 1){
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                    option.attr('value', key).text(val);
                    $('.states').append(option);
                });
                $(".states").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        }); 
    };

    this.getCountries = function() {
        var url = rootUrl+'?type=getCountries';
        var method = "post";
        var data = {};
        $('.countries').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.countries').find("option:eq(0)").html("Select country");
            console.log(data);
            if(data.tp === 1){
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                    option.attr('value', key).text(val);
                    $('.countries').append(option);
                });
                $(".countries").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        }); 
    };

}

$(function() {
    var loc = new locationInfo();
    loc.getCountries();

    $(".countries").on("change", function(ev) {
        var countryId = $(this).val();
        if(countryId !== ''){
        loc.getStates(countryId);
        }
        else{
            $(".states option:gt(0)").remove();
        }
    });

    /* Disabled city
    $(".states").on("change", function(ev) {
        var stateId = $(this).val();
        if(stateId != ''){
        loc.getCities(stateId);
        }
        else{
            $(".cities option:gt(0)").remove();
        }
    });
    */
});

Jquery to retain selected option

<script>
$(document).ready(function(){
    localStorage.setItem('selCountry', '<?php echo $cust_country_code ?>');
    $('.countries').find('option').each(function(i,e){
        if($(e).val() == localStorage.getItem('selCountry')){
            $('.countries').prop('selectedIndex',i);
        }
    });
});
</script>

**the $cust_country_code is return countries id that

HTML - Options is rendered from db + jquery.

<select name="co_country" class="countries">
    <option value="">Select Country</option>

    <!-- HARDCODED FOR TEST, WORKING!
    <option value="111">Brazil</option>
    <option value="142">Germany</option>
    <option value="123">Austria</option>
    <option value="145">Japan</option>
    -->

</select>

I was included $(document).ready() in order jquery to run while DOM is loaded, but no luck, any workaround?