Не выполняется часть кода при on change

У меня есть select, option`ы в который подгружаются динамически:

<select id="slctA"></select>

<script>
    let str = "<option>Hello!</option>";
    $('#slctA').empty().append(str);
</script>

Проблема в том, что список очень большой и мне хотелось бы ограничить его в размерах. Хочу при нажатии на select развернуть его, задав атрибуту size значение "5", а после выбора из списка, сворачивать его(установить size в 1). Этот код благополучно разворачивает список:

$(document).on('click', '#slctA', function() { 
    $('#slctAddCity').attr('size', 5);          
})

Вот код для сворачивания. Console.log срабатывает, а выставление атрибута size-нет:

$(document).on('change', '#slctA', function() {
    $('#slctA').attr('size', 1);  
    console.log('action');        
})

Если в консоли браузера прописать

$('#slctA').attr('size', 1); 

тогда список благополучно свернётся. В чём проблема?