隐藏/显示Divs onChange

Question

I have a variety of divs with form fields. Based on a drop-down list, i need it to display the div corresponding to that value, and hide all the other divs. (Perhaps there's a more efficient way to even do that, rather than load all the divs and just hide them, i'm not sure).

What I have right now is this:

<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>

And the current, semi-working 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>

What i'm getting is 'id' is null, so i haven't been able to work past that part yet.

Part 2 would be hiding the old div and displaying the new div (if they were to change the option selected). Any suggestions?

Solution:

<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>

To make the select and divs, this is what I've done:

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

Try using

var id = eSelect.value;

For the second part, if you are using pure javascript (I mean, you're not using a javascript framework like jQuery) maybe a good solution is to load an array containing the div's ids and iterate it, hiding the 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';
}

Answer 2

window.onload = function() {
    var current, 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; 
    }
}

Answer 3

I'm a javascript novice myself, but what about using a current variable to show which div is shown (and therefore knowing which div to hide)?

window.onload = function() {
    var current, 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; 
    }
}