javascript - 隐藏/显示 Div onChange

Question

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

我现在拥有的是:

<select id="group" name="group">
   <option></option>
   <option value="8">Testing This Stuff</option>
   <option value="9">Testing Other Stuff</option>
</select>

<div id="8" style="display:none;">**form fields**</div>
<div id="9" style="display:none;">**different form fields**</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>

我得到的是“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>

为了制作选择和 div，这就是我所做的:

foreach($groups as $key=>$value)
{
        $valueItem = "groupid_".$value['group_id'];
        $text = $value['title'];
        $htmlString .= sprintf('<option value="%s">%s</option>', $valueItem, $text);
}

echo '<tr>
  <td class="formLabelCell">Group</td>
  <td class="formInputCell">
  <select id="group" class="formInput" name="group">'.$htmlString.'</select></td></tr>';

foreach($groups as $gkey=>$gvalue)
{
   echo '<div id=groupid_'.$groups[$gkey]['group_id'].' style="display:none;">';
   //**Draw the form stuff here**
   echo '</div>';
}

Answer 1

尝试使用

var id = eSelect.value;

对于第二部分，如果您使用纯 javascript(我的意思是，您没有使用像 jQuery 这样的 javascript 框架)，也许一个好的解决方案是加载包含 div 的 ids 的数组并迭代它，隐藏 div ! = eSelect.value

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';
}