Javascript显示/隐藏元素

Question

1. 我有一个隐藏的文本区域（定义为使用引导程序隐藏 ）
2. 我有一个下拉菜单，其中有2个选项。
3. 如果我选择第一个选项，则应显示 textarea。
4. 如果我选择第二个选项，则textarea应该消失 。

这是我的代码，我不知道哪里出问题了：

function OnSelectedIndexChange(){

    var getDropDown = document.getElementById("myDropDownID");
    var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].text;

    if(getDropDownSelectedItemValue == 'Yes'){
        document.getElementById("myTextAreaID").style.display = 'block';
    }

    else{
        document.getElementById("myTextAreaID").style.display = 'none';
    }
}

更新：

添加了jsfiddle链接： jsfiddle.net/wy562fk8/1，但是我正在使用刀片模板，因此您将无法看到任何输出。

Answer 1

可能是您这样做的原因

 var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].text;

代替

 var getDropDownSelectedItemValue = getDropDown.options[getDropDown.selectedIndex].value;

Answer 2

使用onchange函数。

document.getElementById("myDropDownID").onchange = function {
  if(document.getElementById("myDropDownID").value == 'Yes'){
        document.getElementById("myTextAreaID").style.display = 'block';
    }

    else{
        document.getElementById("myTextAreaID").style.display = 'none';
    }
}