为什么ajax无法将数据返回表td中的元素？

Question

嗨我正在做依赖dropdownlist。

如果<select>不在表td中，代码将起作用。

但是，如果选择标记在表td中，则ajax将无法返回表td中的元素。我怎么能解决这个问题？

<table> 
    <tr> 
     <td> 
     <label>Country:</label><br/> 
     <select name="country" id="country-list" onChange="getState(this.value);"> 
     <option value="">Select Country</option> 
     <?php 
     foreach($results as $country) { 
     ?> 
     <option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option> 
     <?php 
     } 
     ?> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <label>State:</label><br/> 
     <select name="state" id="state-list" class="demoInputBox"> 
     <option value="">Select State</option> 
     </select> 
     </td> 
    </tr> 
</table> 


<script> 
function getState(val) { 
    $.ajax({ 
    type: "POST", 
    url: "get_state.php", 
    data:'country_id='+val, 
    success: function(data){ 
     $("#state-list").html(data); 
    } 
    }); 
} 
</script> 

在get_state.php页

<?php 
require_once("dbcontroller.php"); 
$db_handle = new DBController(); 
if(!empty($_POST["country_id"])) { 
    $query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'"; 
    $results = $db_handle->runQuery($query); 
?> 
    <option value="">Select State</option> 
<?php 
    foreach($results as $state) { 
?> 
    <option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option> 
<?php 
    } 
} 
?>