0

I have a dropdown menu, that when a value is chosen it hides/ shows fields, because of the php code behind it I need to use class to choose it.

我还想知道是否有办法在隐藏和显示字段时添加填充。

我尝试使用“ 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';
    }
}
4

1 回答 1

1

您错误地使用了 querySelectorAll 函数，它返回一个元素数组，如果您想要使用单个元素querySelector，在这种情况下它看起来就像您想要的那样。

HTML

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

JS

//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';

你的小提琴有几个错误：

  1. onchange 中的函数名与实际函数名不匹配

  2. 您onLoad选择了包装，这使得该函数没有在全局范围内声明。

  3. 您没有使用正确的 css 选择器，类已.在名称前添加前缀，id 已#添加前缀，当名称前没有句点或 # 时，名称将作为元素标记名查找
于 2013-07-31T11:27:02.750 回答