Javascript显示/隐藏元素

时间:2014-11-06 09:51:30

标签: javascript css twitter-bootstrap blade

  1. 我有一个隐藏的文本区域(定义为隐藏带引导程序)
  2. 我有一个下拉列表,有两个选项。
  3. 如果我选择第一个选项,则textarea应显示
  4. 如果我选择第二个选项,textarea应消失
  5. 以下是我的代码,我不知道哪里出错:

    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但我正在使用刀片模板,因此您无法看到任何输出。

2 个答案:

答案 0 :(得分:1)

你可能正在做的原因

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

而不是

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

答案 1 :(得分:1)

使用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';
    }
}