Java script - show/hide DIV tags based on dropdown selection

<select name="TypeList" onchange="changeForm(this.form.TypeList)">

should be equal to:

<select name="TypeList" onchange="changeForm(this)">


And other thing, if you have select named - List1 and List2 just do something like this in List1 (assuming that name of List2 is "List2"):

<select name="List1" onchange="changeForm(this);this.form.List2.value='';">


This should work... i think :)

Zakoriz,

Isn't that what the else is doing?  If not, then please clarify the layout of the page and the ids of the divs.  It looks like changing the selection in list1 will rerun the function which should hide any elements not selected.  If that isn't happening then do you get an error?  If so what and where?  Otherwise please provide more details.

Let me know if you have any questions or need more information.

b0lsc0tt

Changing List1 to another selection does 'hide' the previous 'div' (list2) however, if anything was selected in List2, that resulting visible 'div' tag stays visible even when the List1 item changes.

Does mine solution works? If not maybe try:

<select name="List1" onchange="changeForm(this);this.form.List2.value='';changeForm(this.form.List2);">

Or something around. Idea is to make onchange in Main List1 to make change to nothing in List2 and do a function that will clean everything there. Can you give All List1 and List2 definition with items inside?

Please show us some html.  I can't really provide the best way to do this without an idea of the elements (i.e. divs, form tag, form fields, etc).  If there is other script that is part of the process please include it.

Running the function twice should not be needed.

bol

Here is some sample of one of my files. I changed the names etc but the structure is basically intact.
What happens is, if I select an item in "Types" dropdown, it shows one of two other dropdowns. (List1 or List2)
When an item is selected in one of those dropdowns another 'div' is shown which contains a form appropriate to that dropdown item.  However, if I go back and change the "Types" selection, that form doesnt clear out. This can cause overlapping DIV tags which is what I'm trying to prevent.  

I need the "Types" list to set all other Divs to 'hidden' when its item is changed (except the List1 or List2 which should be shown based on the selected item)


<!-- Display Form based on selection -->

function changeForm(what)
{
for (var i=0; i<what.options.length; i++)
    {
        if (what.options[i].selected)
              {
                if (document.getElementById)
                    document.getElementById(what.options[i].value).style.visibility="visible";
                     document.getElementById(what.options[i].value).style.left="1px";
            }

        else
              {
                if (document.getElementById)
                    document.getElementById(what.options[i].value).style.visibility="hidden";
                   document.getElementById(what.options[i].value).style.left="800px";
            }
    }
}

</script>

<!-- Verbiage Type Selection box, Values must match Div ID names -->
<div id="Types" style="position: relative; top:10px; visibility: visible;">
<form>
      <select name="TypeList" onchange="changeForm(this.form.TypeList)">
      <option selected value="blank">Select Verbiage type</option>
      <option value="List1">List 1</option>
      <option value="List2">List 2</option>
      </select>
</form>
</div>


<!-- List 1 Selection box, Values must match Div ID names -->
<div id="List1" style="position: relative; top: 1px; left:800px; visibility: hidden;">
<form>
      <select name="List_1" onchange="changeForm(this.form.List_1)">
      <option selected value="blank">Select type</option>
      <option value="version1">version 1</option>
      <option value="version2">Version 2</option>
      </select>
</form>
</div>


<!-- Version 1 form -->
<div id="version1" style="position: absolute; top: 150px; left :800px; visibility: hidden;">
      <form method="POST" target="_self" action="somepage.asp">
form content goes here
      </form>
</div>

<!-- multiple other forms inside DIV tags go here which would be shown/hidden using the 'List 1' dropdown -->


<!-- List 2 selection box -->
<div id="List2" style="position: relative; top:-40px; left:800px; visibility: hidden;">
<form>
      <select name="List_2" onchange="changeForm(this.form.List_2)">
      <option selected="" value="blank">Select Ambush type</option>
      <option value="Version3">Version 3</option>
      <option value="Version4">Version 4</option>
      </select>
</form>
</div>

<!-- Version 3 form  -->
<div id="Version3" style="position: absolute; top: 150px; left :800px; visibility: hidden;">
      <form method="POST" target="_self" action="somepage.asp">
form content goes here
      </form>
</div>

The reason I had it doing left:800px is because even though the DIV is hidden some elements 'overlap' and caused issues.(like not being able to click a text box for example)  I moved it off to the site to make sure it wouldnt do that.
I'll take a look at this code and see if I can plug it in.

There is style called display that goes trough this issues :) I made it in this script

I finally had some time to work on this. Your script works great. I just had to modify some of the style position elements to get things lined up correctly.