在下拉菜单中隐藏/显示标签和文本框答案

【问题标题】：Hide/Display label and textbox on dropdown在下拉菜单中隐藏/显示标签和文本框
【发布时间】：2015-09-22 16:06:48
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： javascript jquery html css dropdown

【解决方案1】：

从

更改第二个标签标签

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

到

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

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

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

Check 已更正。

【讨论】：

感谢这显示了我想要的内容，但如果我点击 2 并点击返回 1，它不会刷新
当然有一个属性调用developer.mozilla.org/en-US/docs/Web/HTML/Element/label - 那里的错误应该是for="guest_name1"
哦，是的。我很抱歉完全忘记了。但他的代码逻辑是对 id 属性进行操作，而不是对 for 属性进行操作。将相应更新。
@user3897102 只需将样式更改添加到 else if 块 document.getElementById('guest_name2').style.display='none'; 检查更新的小提琴 jsfiddle.net/6n2yeem7/1

【解决方案2】：

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

【讨论】：

有其他客人姓名：
“for”属性是指标签所针对的元素的id。因此，例如，您有一个 id 为“input1”的文本框，以及一个带有“input1”的标签作为该文本框的属性。 “for”属性主要用于语义目的，它不是该标签元素的 id。让我知道这是否有意义。
for是允许点击标签触发点击for中的id。代码应该是for="guest_name1"

【解决方案3】：

您需要包含 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>

【讨论】：

谢谢。这有效，但如果我点击 2 并点击 1 回来，它不会刷新，仍然显示 2 个标签和文本框
嗯，对我有用。我会仔细检查并确保您的代码与我的 sn-p 匹配。