Dependent dropdowns not working, 2nd dropdown not

I need help with this one, i dont know why the sub cat wont load. but the first dropdown loads all the queries. i just dont know why it wont work with the 2nd one.

here is my index.php

<?php 
include('config.php'); 
$query_parent = mysql_query("SELECT * FROM zipcodes GROUP BY major_area") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#parent_cat").change(function() {
        $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
        $.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
            $("#sub_cat").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    });

});
</script>
</head>

<body>
<form method="get">
    <label for="category">Parent Category</label>
    <select name="parent_cat" id="parent_cat">
        <?php while($row = mysql_fetch_array($query_parent)): ?>
        <option value="<?php echo $row['major_area']; ?>"><?php echo $row['major_area']; ?></option>
        <?php endwhile; ?>
    </select>
    <br/><br/>

    <label>Sub Category</label>
    <select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>

and here is my loadsubcat.php

<?php 
include('config.php');

$parent_cat = $_GET['parent_cat'];

$query = mysql_query("SELECT city FROM zipcodes WHERE major_area = {$parent_cat}") or die(mysql_error());
while($row = mysql_fetch_array($query)) {
    echo "<option value='$row[city]'>$row[city]</option>";
}
?>

please check my codes, and tell me where i did it wrong. it wont load for the 2nd drop down.

Try doing a simple AJAX function:

<script type="text/javascript">
    function AjaxCall(ElemVal,PlaceId) {
            $.ajax({
                    url: "loadsubcat.php?parent_cat="+$(ElemVal).val(),
                    success: function(result) {
                            $("#"+ PlaceId).html(result);
                        }
                });
        }

        $(document).ready(function() {
            $("#parent_cat").change(function() {
                $("#sub-cat-load").html('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
                AjaxCall(this,'sub-cat-load');
            });
        });
</script>

sub_cat container

<label>Sub Category</label>
<!-- NOTICE THIS PART -->
<div id="sub-cat-load"></div>

loadsubcat.php

<?php 
include('config.php');
// You may want to sanitize this variable
$parent_cat = $_GET['parent_cat'];
$query      = mysql_query("SELECT city FROM zipcodes WHERE major_area = {$parent_cat}") or die(mysql_error()); ?>

<select name="sub_cat" id="sub_cat"><?php
while($row = mysql_fetch_array($query)) { ?>
    <option value="<?php echo $row[city]; ?>"><?php echo $row[city]; ?></option><?php 
    } ?>
</select>