How to clear the text of a linked dropdown (selectpicker) using javascript?

Question

I have the following code and it works well in JSfiddle, but it doesn't work properly on my web page. On this page, I have dropdown "B" which is populated based on the selected item in dropdown "A". In case of changing "A" items, values of the second dropdown changed correctly but its default text remains unchanged until I change the selected item in the second dropdown manually.

code:

function get_child() {
$("#child").empty();
$.ajax({
    type: 'POST',
    url: '@Url.Action("Get_child", "Home")',
    dataType: 'json',
    data: { Name: $("#parent").val() },
    success: function (states) {
        $("#child").append('<option value="0"  selected="selected">&nbsp;</option>');
        $.each(states, function (i, state) {
            $("#child").append('<option value="' + state.Text + '">' +
                state.Text + '</option>');
        });             
    },
    error: function (ex) {
    }

});};