Как можно сбросить селект не только в атрибутах, но и визуально?

Есть зависимые селекты.
Меняя значение в одном, в другом скрываються/показываются options-ы

нужно чтобы при изменении первого (на картинке - верхнего поля) сбрасывалось значение во втором, зависимом селекте

когда первый раз кликаешь, то нормально все отрабатывает, но когда потом меняешь значение первого селекта
во втором, ВИЗУАЛЬНО ситуация не меняется, но форма отправляет корректное значение

if (getType == 'air' || getType == 'train') {
                $('#select1').prop('selectedIndex', 0); //сбрасываем выбор у локаций
                $(getLocationBlock).show();
            } else {
                $(getLocations).find('option[data-type="'+ getType +'"]').prop("selected", true);
                $(getLocationBlock).hide();
            }

        hideLocations(getType, getLocations);

    function hideLocations(type, locations) {

        $(locations).children().each(function () {
            if ($(this).data('type') != type) {
                $(this).hide();
            } else {
                $(this).show();
            }

        });
    }