js根据select值显示隐藏元素不生效

Question

各位帮我看看这个代码不生效是哪里出问题啦？

<li>
<label>国籍</label>
    <select id="nationality" class="form-input">
        <option value="" style="display:none">请选择你的国籍</option>
        <option value="China">中国</option>
        <option value="HongKong">中国香港</option>
        <option value="Macao">中国澳门</option>
        <option value="Taiwan">中国台湾</option>
        <option value="Others">其它国家</option>
    </select>
</li>
<li id="Countrys" style="display:none;">
    <label>其它国籍</label>
    <input type="text" class="form-input" placeholder="请填写您的国籍">
</li>

我是想select选择到其它国家时显示下面这个隐藏的li，他就死活不显示。

<script language="javascript" type="text/javascript">
document.getElementById('Nationality').addEventListener('change', function() {
    var selectedVal = this.value;
    var hdCountry = document.getElementById('Countrys');
    if (selectedVal == 'Others') {
        hdCountry.style.display = 'block';
    } else {
        hdCountry.style.display = 'none';
    }
});
</script>

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从你提供的代码来看，有几个可能的问题导致你的 JavaScript 代码无法正常工作。我会为你列举并提供相应的解决方案：

1. 元素ID的不匹配: 你的 JavaScript 代码中使用的 ID 是 'Nationality'，但 HTML 中 select 元素的 ID 是 'nationality'（注意大小写）。请确保你在 JavaScript 中使用的 ID 与 HTML 中的实际 ID 完全匹配。

修改 JavaScript 中的 ID 为 'nationality'：

document.getElementById('nationality').addEventListener('change', function() {
    // ... 其他代码 ...
});

1. 事件监听器添加的时间点: 确保你的 JavaScript 代码在 DOM 完全加载后执行。如果 DOM 元素在脚本执行时尚未完全加载，getElementById 可能无法找到对应的元素。你可以将你的脚本放在 DOMContentLoaded 事件回调中，或者将 <script> 标签放在 HTML 文档的底部。
2. 其它可能的冲突: 确保页面上没有其他 JavaScript 代码或 CSS 样式影响你的选择元素或隐藏元素。有时，其他的脚本或样式可能会覆盖或干扰你的操作。

在修正上述问题后，你的代码应该能够正常工作。如果仍然存在问题，请检查浏览器的控制台以查看是否有任何错误或警告。