Question

我有一个下拉菜单，当选择一个值时它会隐藏/显示字段，因为它背后的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';
    }
}

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

你的小提琴有几个错误：

onchange中的函数名称与实际函数名称
您已选择onLoad进行换行，这使得该功能未在全局范围内声明。
你没有使用正确的css选择器，类名为.，名称前缀为#，当没有句点或名称前面的＃时，名称被查找为元素标记名

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

1 个答案: