php - Jquery: Option selected not work in rendered select list -
i had countries/state chained select box pulled database (rendered select list), want specific option value remain selected when page redirected action. user input fields temporarily stored in session, fields able retained value, excepted country , state field.
i couldn't find these pulled option tag (which rendered) appeared in view-sources, can view in chrome console , firebug, believe jquery cannot find particular option value perform action, whereas when hard-code options, below script 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 \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 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 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 return countries id
html - options rendered db + jquery.
<select name="co_country" class="countries"> <option value="">select country</option> <!-- hardcoded test, working! <option value="111">brazil</option> <option value="142">germany</option> <option value="123">austria</option> <option value="145">japan</option> --> </select> i included $(document).ready() in order jquery run while dom loaded, no luck, workaround?
Comments
Post a Comment