second dropdown menu not selected

Question

I have two dropdown menu, country and state for the user registration page. Here State is based on country.

If I select the country, then the state based on that country will filter.

My problem is while editing a user.

I have following jquery code:

var u_id = <?= intval($_GET['id']);?>;
        $.post('model/getUser.php',{id:u_id},function(data){
            if(data.success == true){
                 $("#country").val(data.result.country);
                dochange('state', data.result.country);
             $("#state").val("+data.result.state+").attr('selected',true);
            }
        },'json');

Here what I am trying to do is once country is selected then it will filter its state by using function

function dochange(src, val) {
    var req = Inint_AJAX();
    req.open("GET", "loc.php?data="+src+"&val="+val);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    req.send(null);
}

loc.php

$data = $_GET['data'];
$val = $_GET['val'];
$val2 = $_GET['val2'];

if ($data=='country') {
    echo "<select  class='select-style' name='country' id=\"country\" onChange=\"dochange('state', this.value)\">";
    echo "<option value=''>- Select Country -</option>\n";
    $result=mysql_query("select * from countries order by countryName asc");
    while($row = mysql_fetch_array($result)){
        echo "<option value='$row[countryCode]'> $row[countryName]</option>" ;
    }
} 
else if ($data=='state') {
    echo "<select class='select-style' name='state'  id=\"stateId\" >\n";
    echo "<option value=''>- Select State -</option>\n";

    $result=mysql_query("SELECT * FROM state WHERE countryCode= '$val' order by stateName asc");
    while($row = mysql_fetch_array($result)){
        $selected = "";
        if ($val2 == $row[state]) $selected = " selected ";
        echo "<option ".$selected. " value=\"$row[state]\">$row[stateName]</option> " ;
    }
} 
echo "</select>\n";

It is getting filtered but I am not being able to display the state of the user.

Can anybody please help me fix this problem.

Thank you.

Answer 1

You need to do some change on the function dochange

function dochange(src, val,cb) {
    var req = Inint_AJAX();

    req.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            if(cb)
                cb(this.responseText);
       }
    };
    req.open("GET", "loc.php?data="+src+"&val="+val);
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    req.send(null);
}

Then you can use this

var u_id = <?= intval($_GET['id']);?>;
    $.post('model/getUser.php',{id:u_id},function(data){
        if(data.success == true){
             $("#country").val(data.result.country);
            dochange('state', data.result.country,function(data){
                $("#state").html(data);
            });

        }
    },'json');

also you can use like this

var u_id = <?= intval($_GET['id']);?>;
    $.post('model/getUser.php',{id:u_id},function(data){
        if(data.success == true){
             $("#country").val(data.result.country);
            dochange('state', data.result.country,function(data){
                $("#state").html(data);
                $("#state").val('01');
            });

        }
    },'json');

Answer 2

I get my solution by using following code:

var u_id = <?= intval($_GET['id']);?>;
        $.post('model/getUser.php',{id:u_id},function(data){
            if(data.success == true){
                 if($("#country").val(data.result.country)){
                    dochange('state', data.result.country);
                    $(window).on('load', function () {
                        $("#state").val('01');
                    });
                 }
            }
        },'json');

Is this correct way and how to pass data.result.state to window.on('load') function.