I'm creating a form where people make a selection from menu 1, which will show a second menu, depending on the choice in menu 1. Then a third menu will show, depending on choice number 2.

It looks like this:

Menu 1
- - -|___ choice 1.1 -> Menu 2.1
- - - - - - - - - - - - - - - - - - |___ choice 2.1.1 -> menu 3.1.1
- - - - - - - - - - - - - - - - - - |___ choice 2.1.2-> menu 3.1.2

- - -|___choice 1.2-> Menu 2.2
- - - - - - - - - - - - - - - - - - |___ choice 2.2.1 -> menu 3.2.1
- - - - - - - - - - - - - - - - - - |___ choice 2.2.2 -> menu 3.1.1
etc.

That works fine if people go in a straight line from 1 to 3.
The problem occurs when you make a different selection in menu 1, after you've made a selection in menu 2. Though menu 2 will be hidden, menu 3 will still be visible, since menu 2 is still selected (but hidden).
I could solve this by creating extra conditions for showing and hiding menu 3, but this would result in an enormous amount of extra conditions, which makes the form unmanageable.

I thought I would solve this by creating a script that would reset all menu's 2 if you change menu 1. But alas, this doesn't seem to work. Menu 3 still stays visible.

Any thoughts how to solve this?

In addition, my script (in the properties of the form) is:

<script>
function resetMenu() {
document.getElementById('menu21').value = "";
document.getElementById('menu22').value = "";
}
</script>

In the additional attributes of menu 1 I trigger this function with:
onChange = resetMenu();