Как очистить текст связанного выпадающего списка (selectpicker) с помощью JavaScript?

Question

У меня есть следующий код, и он хорошо работает в JSfiddle, но он не работает должным образом на моей веб-странице. На этой странице у меня есть раскрывающийся список "B", который заполняется на основе выбранного элемента в раскрывающемся списке "A". В случае изменения элементов "A" значения второго раскрывающегося списка изменились правильно, но его текст по умолчанию остается неизменным, пока я не изменю выбранный элемент во втором раскрывающемся списке вручную.

код:

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) {
    }

});};