Javascript 更改时隐藏/显示div

我有很多带表单字段的div。根据下拉列表，我需要它显示与该值对应的div，并隐藏所有其他div。（也许有一种更有效的方法可以做到这一点，而不是加载所有的div并隐藏它们，我不确定）

我现在得到的是：

测试这些东西
测试其他东西
**表单字段**
**不同表单字段**

以及当前的半工作javascript：

<script type="text/javascript">
window.onload = function() {
  var eSelect = document.getElementById('group');
  eSelect.onchange = function() {
     var id = eSelect.selectedIndex;
     document.getElementById(id).style.display = 'block';
  }
}
</script>

window.onload=函数（）{
var eSelect=document.getElementById（'group'）；
eSelect.onchange=函数（）{
变量id=eSelect.selectedIndex；
document.getElementById（id）.style.display='block'；
}
}

我得到的是“id”是空的，所以我还不能工作超过那个部分

第2部分将隐藏旧div并显示新div（如果要更改所选的选项）。有什么建议吗

解决方案：

<script type="text/javascript">
    window.onload = function() {
        var current;
        var eSelect = document.getElementById('group');
        eSelect.onchange = function() {
            var id = eSelect.value;
            if (current && current != id) {
                document.getElementById(current).style.display = 'none'
            }
            document.getElementById(id).style.display = 'block';
            current = id; 
        }
    }
</script>

<select id="materialsgroup" class="formInput" name="materialsgroup">
   <option value=""></option>
   <option value="groupid_8">Testing This Stuff</option>
   <option value="groupid_9">Testing Other Stuff</option>
</select>

<div id="groupid_8">**form fields**</div>
<div id="groupid_9">**more form fields**</div>

window.onload=函数（）{
无功电流；
var eSelect=document.getElementById（'group'）；
eSelect.onchange=函数（）{
var id=eSelect.value；
if（当前和当前！=id）{
document.getElementById（当前）.style.display='none'
}
document.getElementById（id）.style.display='block'；
电流=id；
}
}
测试这些东西
测试其他东西
**表单字段**
**更多表单字段**

要创建select和DIV，我已完成以下操作：

foreach（$key=>$value的组）
{
$valueItem=“groupid”..$value['group\u id']；
$text=$value['title']；
$htmlString.=sprintf（'%s'，$valueItem，$text）；
}
回声'
团体
“.$htmlString.”；
foreach（$gkey=>$gvalue的组）
{
回声'；
//**在这里画表格**
回声'；
}

尝试使用

var id = eSelect.value;

对于第二部分，如果您使用纯javascript（我的意思是，您没有使用像jQuery这样的javascript框架），那么一个好的解决方案可能是加载一个包含div的ID的数组并迭代它，隐藏div！=选择值

var arrDivs = new Array("1","2","3");
for (var i=0; i < arrDivs.length; i++) {
    if (arrDivs[i] == eSelect.value)
        document.getElementById(arrDivs[i]).style.display = 'block';
    else
        document.getElementById(arrDivs[i]).style.display = 'none';
}

var arrDivs=新数组（“1”、“2”、“3”）；
对于（变量i=0；i

尝试使用

var id = eSelect.value;

对于第二部分，如果您使用纯javascript（我的意思是，您没有使用像jQuery这样的javascript框架），那么一个好的解决方案可能是加载一个包含div的ID的数组并迭代它，隐藏div！=选择值

var arrDivs = new Array("1","2","3");
for (var i=0; i < arrDivs.length; i++) {
    if (arrDivs[i] == eSelect.value)
        document.getElementById(arrDivs[i]).style.display = 'block';
    else
        document.getElementById(arrDivs[i]).style.display = 'none';
}

var arrDivs=新数组（“1”、“2”、“3”）；
对于（变量i=0；i

我自己也是javascript新手，但是使用当前变量来显示哪个div（从而知道要隐藏哪个div）怎么样

---

我自己也是javascript新手，但是使用当前变量来显示哪个div（从而知道要隐藏哪个div）怎么样

---

唉，我觉得自己很笨。成功了：P不过对第二部分有什么建议吗？隐藏当前div并显示新选择的选项/div？我还建议不要使用

8

和

9

作为ID。ID应该以字母字符开头。动态添加id通常适用于INT，但如果您假设将有和id为

8

，事情会变得很奇怪。就像尝试设计

#8

一样，这只是创建这些选项和div的一小部分代码。这一切都是由php和sql造成的。我只是展示了一些必要的东西。主要的问题是我永远不知道需要创建多少个div。对于每个查看它的用户来说，它可能是不同的。但这就是为什么我很难找到一个隐藏旧唱片的方法。除非有办法将旧值存储在全局变量中的某个位置，并告诉它隐藏该值，显示新值，将全局变量更新为当前值。@IceBlueFire您是如何处理的？如果不是，我可以把一个鞭打到高处，我觉得自己很笨。成功了：P不过对第二部分有什么建议吗？隐藏当前div并显示新选择的选项/div？我还建议不要使用

8

和

9

作为ID。ID应该以字母字符开头。动态添加id通常适用于INT，但如果您假设将有和id为

8

，事情会变得很奇怪。就像尝试设计

#8

一样，这只是创建这些选项和div的一小部分代码。这一切都是由php和sql造成的。我只是展示了一些必要的东西。主要的问题是我永远不知道需要创建多少个div。对于每个查看它的用户来说，它可能是不同的。但这就是为什么我很难找到一个隐藏旧唱片的方法。除非有办法将旧值存储在全局变量中的某个位置，并告诉它隐藏该值，显示新值，将全局变量更新为当前值。@IceBlueFire您是如何处理的？如果不是，我可以抽一个。工作很有魅力，非常感谢。如果我能选择多个答案作为“答案”就好了。哈哈。工作很有魅力，非常感谢。如果我能选择多个答案作为“答案”就好了。这有点让人困惑，因为我无法显示全部内容，但运行了一个SQL查询来获取所有组并将其存储在数组$groups中。从这里开始，它执行foreach（其中两个是因为元素的位置）来生成html并将其回显到屏幕上。这有点令人困惑，因为我无法显示全部内容，但有一个SQL查询用于获取数组$g中的所有组和存储