javascript - 如何根据下拉菜单隐藏输入

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”改为“other”的拼写错误。

将要显示/隐藏的内容包装在 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)