onchange для select
 

Ребят,нужна помощь,сейчас пишу кредитный калькулятор(для тренировки скилов и вообще для общего развития) и хочу реализовать такой функционал(им сейчас особо никто не пользуется но мне просто интересно) Есть у меня выпадающий список select и внутри него варианты срока выплаты кредита - 7лет,10лет,15лет,20лет и вариант "Другое". Как при нажатии на "Другое" реализовать появление под селектом инпута в который можно будет вручную вводить данные? я пишу на нативном js и с jquery пока не работаю, буду благодарен за любую помощь))

<select name="period">
    <option value="">Выберите срок</option>
    <option value="10">10 лет</option>
    <option value="15">15 лет</option>
    <option value="other">Другое</option>
</select>

<script>
document.querySelector('select[name=period]').addEventListener('change', function() {
    if(this.value=='other') {
        let field = document.createElement("input");
        field.name = this.value;
        this.after(field) 
    } else {
        let field = document.querySelector('input[name=other]'); 
        if(field) this.parentNode.removeChild(field)
    }
});</script>

Подразумевается, что созданное поле получая имя как значение опции Другое, отправит значение выбранное для опции, то есть серверу можно проверять наличие ключа other, если нет, значит получаем значение списка.

Спасибо,все отлично работает)

Но в реальной форме вряд-ли такой код нужен.