Как скрыть ввод на основе выпадающего

Question

У меня есть форма входа в систему, где пользователи могут выбирать свою страну из раскрывающегося списка, и я хотел бы показывать параметр «Если указать другое» только тогда, когда пользователь выбирает «другое» из раскрывающегося списка.

Я нашел много других ответов на этот вопрос, но они используют jQuery, и я хотел бы использовать чистый JavaScript.

Вот мой HTML-код.

<form>
    Username/Name:<br><input type="text"><br>
    Country:<br>
    <select id="country" name="country">
        <option value="us">United States   </option>
        <option value="uk">United Kingdom  </option>
        <option value="ca">Canada  </option>
        <option value="othr">Other  </option>
    </select><br>
    If other specify:<br><input type="text"><br>
    Password:<br><input type="text"><br>
    <input type="submit" value="Log In">
</form>

Спасибо!

Answer 1

Исправьте опечатку другого на другие.

Обернуть материал, который вы хотите показать / скрыть, в элементе с идентификатором «other-container», затем

function handleCountryChange(event) {
     var display = event.target.value == 'other' ? 'inline' : 'none';
     otherContainer.style.display = display;
}

var otherContainer = document.getElementById('other-container');
var countrySelect = document.getElementById('country');

countrySelect.addEventListener('change', handleCountryChange)