Question

I have three select boxes state,city and locality with the id’s same as name

$(document).ready(function() {
    $("#state").on('change',function(){
        var state = $("#state").attr('value');
        $("#city").load('http://localhost/trial/index.php/new/view_cities/'+state).change();
    }).change();

    $("#city").on('change',function(){
        var city = $("#city").attr('value');
        $("#locality").load('http://localhost/trial/index.php/new/view_localities/'+city);
    }).change();
});

On page load state gets correctly shown because it’s directly from database, and city options gets automatically updated, but localities do not. And when i change city the localities can change.

Answer 1

The .load() function is just a wrapper for a call to $.ajax() which is asynchronous; if you’re trying to interact with the elements loaded into the element as a result of that call, you’ll need to pass a callback function that executes once the AJAX request has returned a successful response.

Try replacing:

$("#city").load('http://localhost/trial/index.php/new/view_cities/'+state).change();

with

$("#city").load('http://localhost/trial/index.php/new/view_cities/'+state, 
function() {
    $("#city").change();
});

And a couple of general points:

You can use this inside a function for an event handler to refer to the element that triggered the event. Rather than:

$("#state").on('change',function(){
    var state = $("#state").attr('value');

you could do:

$("#state").on('change',function(){
    var state = this.value;

Also, if you are going to use jQuery to get the value of an element, use the .val() function rather than .attr('value').