Populate a dropdown from a selected dropdown value

<div class="form-group">
                                        @Html.LabelFor(model => model.SalaryGradeId, htmlAttributes: new { @class = "control-label col-md-2" })
                                        <div class="col-md-6">
                                            @Html.DropDownListFor(model => model.SalaryGradeId, (List<SelectListItem>)Model.SalaryGradeList, new { @class = "form-control", onchange = "GetSalaryNotchByGrades();", @id = "SalaryGrade_Cbx" })
                                            @Html.ValidationMessageFor(model => model.SalaryGradeId, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        @Html.LabelFor(model => model.NotchId, htmlAttributes: new { @class = "control-label col-md-2" })
                                        <div class="col-md-6">                                             
                                           <select class="form-control" id="SalaryNotch_Cbx" onchange="GetAmount();">                                                                                                                                      
                                          </select>
                                            @Html.ValidationMessageFor(model => model.NotchId, "", new { @class = "text-danger" })
                                        </div>
                                    </div>

<script>
    function GetAmount() {

                $.ajax({
                    url: baseUrl + 'api/SalaryNotch/' + $("#SalaryNotch_Cbx").val(),
                    type: 'GET',
                    headers: { 'Access-Control-Allow-Origin': '*' },
                    dataType: 'json',
                    success: function (data) {
                        if (data.HasError == 0) {
                            console.log(data.Model);
                            $("#BasicSalary_Txt").val(data.Model.Monthly)
                        }
                    },
                    error: function (request, error) {
                        console.log(error);
                    }
                });
            }          
        
      

    function GetSalaryNotchByGrades() {

                $.ajax({
                    url: baseUrl + 'api/SalaryGradeByNotch/' + $("#SalaryGrade_Cbx").val(),
                    type: 'GET',
                    headers: { 'Access-Control-Allow-Origin': '*' },
                    dataType: 'json',
                    success: function (data) {
                        if (data.HasError == 0) {
                            console.log(data.Model);
                            $("#SalaryNotch_Cbx").val(data.Model);
                            $("#SalaryNotch_Cbx").html("");
                            $("#SalaryNotch_Cbx").append
                           // ($('<option></option>').val(null).html("Select Notch"));
                            $.each($.parseJSON(data), function (i, notch)
                            { $("#SalaryNotch_Cbx").append($('<option></option>').val(notch.Id).html(notch.Name)) })
                                
                        }
                    },
                    error: function (request, error) {
                        console.log(error);
                    }
                });
            }


</script>