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

时间:2016-01-16 05:47:47

标签: php jquery renderer selectedindex

我从数据库(呈现的选择列表)中删除了countries/state chained select box,但是我希望在通过特定操作重定向页面时保持选择特定选项值。用户输入字段暂时存储在SESSION中,所有字段都可以保留值,CountryState字段除外。

我无法找到这些已提取的option标记(已呈现),但我可以在Chrome控制台和Firebug中查看,因此我认为jquery无法找到特定的选项值执行操作,而当我对选项进行硬编码时,下面的脚本正在运行:

附加选项

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 \nError Code: "+e.status+" \nError 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保留所选选项

<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>

** $cust_country_code是返回国家/地区ID

HTML - 从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>

我加载$(document).ready()以便在加载DOM时运行jquery,但没有运气,任何解决方法?

0 个答案:

没有答案