如何基於下拉菜單隱藏輸入

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

修正其他錯別字。

將要顯示/隱藏的內容包裝在ID為“ 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)