Question

我正在尝试基于选择显示/隐藏两个元素 - 使用Javascript getElementsByName的标签和输入。如果我在标签和输入上改变了一些东西，它适用于getElementByID但由于某种原因Name不起作用。这是代码：

<script language="JavaScript" type="text/javascript">
<!--

function Toggle(obj){
 var val=obj.value;
 if (!obj.m){ obj.m=''; }
 if (!obj.m.match(val)){ obj.m+=','+val+','; }
 var hide=obj.m.split(',');
 for (var zxc0=0;zxc0<hide.length;zxc0++){
  if (document.getElementsByName(hide[zxc0])){
   document.getElementsByName(hide[zxc0]).style.display='none';
  }
 }
 var show=val.split(',');
 for (var zxc1=0;zxc1<show.length;zxc1++){
  if (document.getElementsByName(show[zxc1])){
   document.getElementsByName(show[zxc1]).style.display='';
  }
 }
}

//-->
</script>

这里是表单元素：

            <div id="styled-select">
            <select name="how" onchange="Toggle(this);" class="dropdown">
                    <option value="Internet Search">Internet Search</option>
                    <option value="Facebook" >Facebook</option>
                    <option value="Twitter" >Twitter</option>
                    <option value="LinkedIN" >LinkedIN</option>
                    <option value="Referral">Referral</option>
                    <option value="Other">Other</option>
            </select>
            </div>                
            <label name="Referral" style="display:none;">Referred By:</label>
            <input name="Referral" style="display:none;" value="" class="hidden-txt">

当用户选择“Referal”时，它应显示名为“Referral”的标签和输入。如果我使用了getElementByID，我有这个工作，给了选项两个用逗号分隔的值，并为标签和输入使用了单独的ID。

感谢您的帮助。

Answer 1

var elems = document.getElementsByName(hide[zxc0]);
if(elems) {
    for(var i = 0;i < elems.length;i++) {
       elems[i].style.display='none';
       //Do whatever else you need to do with the element.
    }
}

如Kevin Boucher所述，getElementsByName返回一个数组。假设您要将display = none样式应用于具有该名称的所有元素，上面的代码将实现这一点。同样为了性能，上面的代码只调用document.getElementsByName（）一次，而不是3次以上，我相信这将是有益的。

可能值得调查JQuery，因为它易于选择元素。

根据选择显示/隐藏表单元素

1 个答案: