Ajax is not working

I trying to create a cascading dropdown in MVC but my ajax call is not working and I can not figure out why.  Below is the code:


<script type="text/javascript">$(function () {$("#ranks").change(function (evt) {

            if ($("#ranks").val() != "-1") {$.ajax({ -----------------------------------> not running this code
                    url: "/GetRecord/GetBranchRanks",
                    type: 'POST',
                    data: { ranks: $("#ranks").val() },
                    success: function (response) {$("#RankList").replaceWith(response)
                    }, --------------------------------------------------> not running
                    error: function (xhr) {
                        alert(" Please choose correctly.");
                    }
                });
            }
        });
    });</script><td>Branch:</td><td style="width:150px" ><select id="ranks" name="ranks" style="width: 200px; height:20px"><option value="-1">-- Select Branch --</option><option value="0">NA</option><option value="1">USA</option><option value="2">USN</option><option value="3">USAF</option></select></td>

////////////////////////////////////////////////////////////////////////////

<td>Rank:</td><td><select id="RankList" name="RankList" style="width: 200px; height:20px""><option>-- Select Rank --</option></select></td>