Question

这是我下面的代码，只有当我选择＆＃34;否＆＃34;应该显示表格行。我尝试了这个onchange事件和DOM，所以我可以显示隐藏表。但我不知道它为什么不起作用。

<!DOCTYPE html>
<html>
<head>
<script>


function showstuff(){
   document.getElementById(show).style.display="block";
}
</script>
</head>

<body>

<form>
Choose which browser you prefer:
<select id="browsers" onchange="showstuff(show)">
<option value="Maybe">May Be</option>
<option value="Yes">Yes</option>
<option value="NO">No</option>
</select>
</form>

<table>
       <tr id="show" style="display: none">
<td>Write why no?</td>
<td><input type="text" name="whyno"></td>
</tr>


</table>

</body>
</html>

Answer 1

在JavaScript中，DOM元素ID是字符串，因此您必须使用单引号或双引号分隔它们，即'show'，如果要将某个值传递给函数，则必须定义参数名称，即function showstuff(argument)，然后在函数的其余部分使用参数。

编辑：我修改了你的函数以获取三个参数：你想要显示的元素，必须选中的选项，以及对元素的引用改变。例如，仅当选择了showstuff('show', 'NO', this)选项时，id="show"才会显示包含'NO'的元素。

将您的功能更改为：

function showstuff(element, option, t){
   if(t.options[t.selectedIndex].value==option){
      document.getElementById(element).style.display="block";
   }else{
      document.getElementById(element).style.display="none";
   }
}

以及HTML：

<select id="browsers" onchange="showstuff('show', 'NO', this);">

jsFiddle example.

onChange事件处理程序，带有可以显示隐藏元素的select元素

1 个答案: