Javascript 显示/隐藏元素

Posted 2023-03-14

【中文标题】Javascript 显示/隐藏元素

【英文标题】：Javascript show / hide elements

【发布时间】：2015-01-02 18:31:47

【问题描述】：

我有一个隐藏的文本区域（定义为 hidden with bootstrap） 我有一个包含 2 个选项的下拉菜单。 如果我选择第一个选项，textarea 应该显示。 如果我选择第二个选项，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 但我正在使用刀片模板，因此您无法看到任何输出。

【问题讨论】：

请同时发布您的 html，并创建一个jsfiddle

你如何/在哪里打电话给OnSelectedIndexChange？

究竟是如何“定义为使用引导隐藏”的？

这是我的 jsfiddle：jsfiddle.net/wy562fk8/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';
    

【讨论】：

这个我也试过了，不知道但是还是不行。

【参考方案2】：

可能是你这样做的原因

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

而不是

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

【讨论】：

你能用输出代替刀片模板吗，还可以尝试从 textarea 中删除隐藏类，因为它可能使用可见性 css