Clearing and resetting of select option to default value is not working in Jquery

Question

I am filling my second dropdownlist on the basis of the first one. So when I set my first dropdownlist to --Select-- it is not resetting my second dropdownlist to the values which I am setting and also it is not clearing the values.

Here is my code.

function FillStateHeadDetails() {

    var selectedVal = $('#ddlZonalHeadNameAdd').val();

    try {
        $.ajax({
            url: "GET_DATA_BY_STORE.aspx/GetStateHeadDetails",
            dataType: "json",
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ selectedVal: selectedVal }),
            async: true,
            processData: false,
            cache: false,
            success: function (response) {

                var retrievedParsedValue = JSON.parse(response.d);

                if (selectedVal == 0) {
                    $('#txtZonalHeadNoAdd').val('');
                   $("#ddlSLPStateHeadAdd").val('');       // clearing here             
                    zonalECNumber = "";
                }
                else {

                    for (var i = 0; i < retrievedParsedValue.Table.length; i++) {
                        $('#txtZonalHeadNoAdd').val(retrievedParsedValue.Table[0]["ZONAL_MOB_NUM"]);
                        zonalECNumber = retrievedParsedValue.Table[0]["ZONAL_EC_NUM"];
                    }

                    var slpStateHead = $("#ddlSLPStateHeadAdd"), options = '';
                    slpStateHead.empty();

                    options += "<option value='0'>--Select--</option>";

                    for (var j = 0; j < retrievedParsedValue.Table1.length; j++) {
                        options += "<option value='" + retrievedParsedValue.Table1[j]["ZONE_ID"] + "'>" + retrievedParsedValue.Table1[j]["STATE_HEAD_NAME"] + "</option>";
                    }
                    slpStateHead.append(options);
                }
            },
            error: function (xhr) {
                alert('Cannot fill the SLP State Head Contact and Emaild ID details now');
            }
        })
    } catch (e) {
    }
}

1st dropdownlist

<select id="ddlZonalHeadNameAdd" runat="server" class="form-control" onchange="return FillStateHeadDetails()"></select>

2nd dropdownlist

 <select id="ddlSLPStateHeadAdd" class="form-control"> 
                                    </select>

Answer 1

Add a simple if condition there:-

function FillStateHeadDetails() {

    var selectedVal = $('#ddlZonalHeadNameAdd').val();

    if(selectedVal == ''){ // i assume first option value is empty

      $("#ddlSLPStateHeadAdd").html('<option value="">--Select--</option>');

    }else{

      //your try-catch code will come here

    }
}

If you want to compare with text then:-

function FillStateHeadDetails() {

    var selectedVal = $('#ddlZonalHeadNameAdd').val();

    if($('#ddlZonalHeadNameAdd').text() == '--Select--'){

      $("#ddlSLPStateHeadAdd").html('<option value="">--Select--</option>');

    }else{

      //your try-catch code will come here

    }
}