0

我正在尝试在下拉选择中隐藏/显示标签和文本框。

所以选择了 I No，我不想显示其他任何内容

如果选择 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>

谢谢

4

3 回答 3

1

将第二个标签标签从

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

至

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

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

document.getElementById('guest_label') 将返回 null，我们不能调用.stylenull 值。

检查更正的一个。

于 2015-09-22T16:15:33.837 回答
0

您需要包含 guest_label1 和 guest_label2 的 ID，然后选择切换 guest_label2 of 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>
于 2015-09-22T16:17:47.973 回答
0

除非您发布的代码不完整，否则您没有 ID 为“guest_label”的元素。JS 在尝试引用具有该 id 的元素的属性时返回错误，该 id 为空。

于 2015-09-22T16:12:08.207 回答