Jquery Ajax with GET not working - php

Question

I have this peace of HTML code
<select id="country" name="country" onchange="updateState()">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<select id="state" name="state">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
and im trying to update state select with JQuery ajax
<script type="text/javascript">
function updateState(){
var state = $('#country').val();
alert(state);
$.ajax(
{
type: "GET",
url: "../functions/selectstate.php",
data: { sta : state }
}).done(function( html )
{
$('#state').empty();
$('#state').append(html);
})
}
}
</script>
selectstate.php have this php code, i tested it and work fine
include_once('select.php');
include_once('cndb.php');
$sDB = new SelectDb();
$data = $sDB->selectStatesById($_GET['sta']);
foreach($data as $row)
{
echo "<option value=" . $row->state . ">" . $row->name . "</option>";
}
I just can't see where is the problem. Thanks in advance

Answer 1

HTML
<select id="country" name="country">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<select id="state" name="state">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
SCRIPT
<script type="text/javascript">
$(document).on('change','#country',function (){
var state = $('#country').val();
alert(state);
$.ajax(
{
type: "GET",
url: "../functions/selectstate.php",
data: { sta : state }
}).done(function( html )
{
//$('#state').empty();
//$('#state').append(html);
$('#state').html(html);
// you can use it insetead of the above two lines
})
//}<-- here is th problem remove this extra bracket
});
</script>

Answer 2

Try using the below approach. It might help
HTML Code:
<select id="country" name="country" onchange="updateState()">
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
</select>
<div id="stateDiv">
<select id="state" name="state">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
</div>
JavaScript Code:
...
...
.done(function( result )
{
$('#stateDiv').html(result);
})
...
...
PHP Code:
...
...
echo '<select id="state" name="state">';
foreach($data as $row)
{
echo "<option value=" . $row->state . ">" . $row->name . "</option>";
}
echo '</select>';
...
...