javascript - 只有在下拉选择列表中选择了“其他”时，我才需要一个文本输入区域才能显示表单？

Question

好吧，我的问题非常简单直接。下拉列表的 html 很简单，这里是我发现使用的脚本和 html

<select id='combo'>
<option>Yes</option>
<option>No</option>
<option>other</option>
</select>
<input  id='text1' style='display: none'/>
<input  id='text2' style='display: none'/>

<script>

document.getElementById('combo').onchange = function() {
var display = this.selectedIndex == 2 ? "inline" : "none";
document.getElementById('text1').style.display = display;
document.getElementById('text2').style.display = display;
}
</script>

我该如何应用这个？如果当然，这甚至可以工作......

谢谢

Answer 1

您需要等到 DOM 加载完毕。如果你不等到它被加载，document.getElementById('combo')就不会返回任何东西，因此你不会绑定事件。

document.addEventListener("DOMContentLoaded", function(){

  document.getElementById('combo').onchange = function() {
    var display = this.selectedIndex == 2 ? "inline" : "none";
    document.getElementById('text1').style.display = display;
    document.getElementById('text2').style.display = display;
  }

},false);

Answer 2

您需要在加载 DOM 后添加事件。

window.onload = function()
{
    document.getElementById('combo').onchange = function() {
        var display = this.selectedIndex == 2 ? "inline" : "none";
        document.getElementById('text1').style.display = display;
        document.getElementById('text2').style.display = display;
    }
}

或者

document.addEventListener("DOMContentLoaded", function(event)
{
    document.getElementById('combo').onchange = function() 
    {
        var display = this.selectedIndex == 2 ? "inline" : "none";
        document.getElementById('text1').style.display = display;
        document.getElementById('text2').style.display = display;
    }
});

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded

http://jsfiddle.net/J9rXS/1/

请注意我是如何从 jsFiddle 中删除 OnLoad 选项的，它在标题中添加了一个换行（因此它适用于上面评论中的人）。