Question

我试图在下拉列表选项中隐藏/显示标签和文本框。

所以我没有被选中，我不想显示任何其他内容

如果选择1，我想显示1个标签和1个文本框如果选择2，我想显示2个标签和2个文本框

我做错了什么？

<!DOCTYPE html>
<html>
<head>
<script>
function checkvalue(val)
{
if(val==="No")
{
   document.getElementById('guest_label').style.display='none';
   document.getElementById('guest_name1').style.display='none'; 
   document.getElementById('guest_label').style.display='none';
   document.getElementById('guest_name2').style.display='none';
}

 else  if(val==="1")
{
   document.getElementById('guest_label').style.display='block';
   document.getElementById('guest_name1').style.display='block';
 }
 else 
 {
   document.getElementById('guest_label').style.display='block';
   document.getElementById('guest_name1').style.display='block';
   document.getElementById('guest_label').style.display='block';
   document.getElementById('guest_name2').style.display='block';
 }
   }
 </script>
 </head>
<body>

 <label for="guest_number">Any Guest: </label>
  <select name="guest" onchange='checkvalue(this.value);'> 



                <option value="No" selected >No</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>


 <label for="guest_label" style='display:none'>Other Guest Name: </label>
 <input type="text" name="guest_name" id="guest_name1" style='display:none'/>
<input type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
 </html>

由于

Answer 1

从

更改第二个标签标签

<label for="guest_label" style='display:none'>Other Guest Name: </label>

到

<label id="guest_label" style='display:none'>Other Guest Name: </label>

当您无法找到ID为“guest_label”的元素时，您的JavaScript代码将在document.getElementById('guest_label') .style.display='none';失败。

document.getElementById（'guest_label'）将返回null，我们无法调用.style获取空值。

Check更正了。

Answer 2

您需要包含guest_label1和guest_label2的ID，然后选择切换guest_label2为1。

<script>
function checkvalue(val)
{
if(val=="No")
{
   document.getElementById('guest_label1').style.display='none';
   document.getElementById('guest_name1').style.display='none'; 
   document.getElementById('guest_label2').style.display='none';
   document.getElementById('guest_name2').style.display='none';
}

 else  if(val==="1")
{
   document.getElementById('guest_label1').style.display='block';
   document.getElementById('guest_name1').style.display='block';
  document.getElementById('guest_label2').style.display='none';
   document.getElementById('guest_name2').style.display='none';
 }
 else 
 {
   document.getElementById('guest_label1').style.display='block';
   document.getElementById('guest_name1').style.display='block';
   document.getElementById('guest_label2').style.display='block';
   document.getElementById('guest_name2').style.display='block';
 }
   }
 </script>
</head>
<body>
<label for="guest_number">Any Guest: </label>
  <select name="guest" onchange='checkvalue(this.value);'> 



                <option value="No" selected >No</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>


 <label id="guest_label1" for="guest_label" style='display:none'>Other Guest Name: </label>
 <input type="text" name="guest_name" id="guest_name1" style='display:none'/>
  <label id="guest_label2" for="guest_label" style='display:none'>Other Guest Name: </label>
<input  type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
</html>

在下拉列表中隐藏/显示标签和文本框

2 个答案: