下拉菜单选项通过类隐藏字段

我有一个下拉菜单，当选择一个值时，它隐藏/显示字段，因为它后面的php代码，我需要使用类来选择它。下拉菜单选项通过类隐藏字段

我也想知道是否有一种方法来隐藏和显示字段时加回填充。

我试过使用“document.getElementsByClassName("className");”但是无法让它工作。

HTML：

<select id="form" onchange="ChangeDropdowns(this.value);"> 
    <option value="hide">hide</option> 
    <option value="show">show</option> 
</select> 
<input type="text" id="testField" class="testField" />

的Javascript：

function ChangeDropdowns(value) { 
    if (value == "show") { 
     document.getElementById('testField').style.display = 'none'; 
    } else if (value == "hide") { 
     document.getElementById('testField').style.display = 'block'; 
    } 
}

来源

2013-07-31 Switchfire

使用' document.querySelectorAll（“。className”）'，并且简单地将display设置为none并且返回到block应该不会影响填充，除非该元素不是以开头的块元素。 –

确保您的JavaScript加载后的HTML加载。时间JavaScript加载如果HTML不存在它不会工作。 – Bhadra

@PatrickEvans我尝试使用document.querySelectorAll（“。className”）来代替getElementById，它仍然不起作用。虽然你让我意识到，如果我将它从块更改为内联，那么没有任何需要更正填充。巴德拉我现在已经设置了脚本加载后的HTML，但仍然没有运气！ – Switchfire

您正在使用querySelectorAll功能失常，则返回元素的数组，如果你想有一个单一的元素使用querySelector这在这种情况下，它看起来像你想要的。

HTML

<input type="text" id="testField" class="testField2"/>

//Uses class, a period needs to be before the class name, when selecting by class 
document.querySelector(".testField2").style.display='none'; 

//Uses id, a # needs to be before the id name, when selecting by id 
document.querySelector("#testField").style.display='none';

当使用querySelectorAll它会返回一个数组，所以你必须访问它是这样

var elements = document.querySelectorAll(".testField"); 
elements[0].style.display='none';

你的小提琴发生了一次政变文件错误：在平变化

功能名称didnt符合实际的函数名
你有选择的包裹，这是使得它如此的功能wasnt在全球范围内被宣布onLoad。
您的werent使用正确的CSS选择器，类有.前缀名称，标识具有#前缀，在名称前无期或＃，名称抬头为元素标记名

来源

2013-07-31 11:27:02

干杯帕特里克你的明星！有了这篇文章，我已经开始工作了。我不仅错过了我使用querySelectorAll的事实，而且我没有时间。再次感谢！ – Switchfire

下拉菜单选项通过类隐藏字段

回答

相关问题