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)

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

1 个答案: