Clearing Element after Changing Earlier selection

[Jason]

Hi all,

I know how to do this the hard way, but I suspect that there's an
easier option.

I'm creating a program that requires a series of 4 or 6 select menus.
Something like this:

<select name="1">
<option value="a">A</option>
<option value="b">B</option>
</select>

If the visitor chooses "A", they'll see:

<select name="2">
<option value="c">C</option>
<option value="d">D</option>
</select>

But if they choose "B" in that first menu, they'll see:

<select name="2">
<option value="e">E</option>
<option value="f">F</option>
</select>

Make sense? This goes on for 5 of these menus, and each menu is
dependent upon a previous selection.

My problem is when someone is already on, say, menu # 4, but then goes
back to change menu # 2. At that point, I need for menu # 3 and # 4 to
go away, as if they had never been created in the first place.

The only way I know to do is something like this:

<script>
function changeit() {
if (select2 !== "")
var select2 = "<select name='2><option value='c'>C</option><option
value='d'>D</option></select>";

document.getElementById("2").innerHTML = select2;
}
</script>

<select name="1" onChange="select2 = ''; changeit()">
<option value="a">A</option>
<option value="b">B</option>
</select>

<span id="2"></span>


But this seems to be overly complicated, especially after doing 6 of
these select menus! Is there an easier way that I'm not seeing?

TIA,

Jason

PS, all code was written specifically for this email just to help
explain my problem, so please overlook any typos.

 

[RobG]

Hi all,

I know how to do this the hard way, but I suspect that there's an
easier option.

I'm creating a program that requires a series of 4 or 6 select menus.
Something like this:

<select name="1">
<option value="a">A</option>
<option value="b">B</option>
</select>

If the visitor chooses "A", they'll see:

<select name="2">
<option value="c">C</option>
<option value="d">D</option>
</select>

But if they choose "B" in that first menu, they'll see:

<select name="2">
<option value="e">E</option>
<option value="f">F</option>
</select>

Make sense? This goes on for 5 of these menus, and each menu is
dependent upon a previous selection.

My problem is when someone is already on, say, menu # 4, but then goes
back to change menu # 2. At that point, I need for menu # 3 and # 4 to
go away, as if they had never been created in the first place.

The only way I know to do is something like this:

<script>
function changeit() {
if (select2 !== "")
var select2 = "<select name='2><option value='c'>C</option><option
value='d'>D</option></select>";

document.getElementById("2").innerHTML = select2;}

</script>

<select name="1" onChange="select2 = ''; changeit()">
<option value="a">A</option>
<option value="b">B</option>
</select>

<span id="2"></span>

But this seems to be overly complicated, especially after doing 6 of
these select menus! Is there an easier way that I'm not seeing?

I would create a scheme for the select names, like:

<select name="sel_1" onchange="updateSel(this);" ...>
<option></option>
</select>
<select name="sel_2" onchange="updateSel(this);" ...>
<option></option>
</select>

and so on. Each would have a default first option. Whenever any
option is modified, the options for the next select are inserted and
those of any subsequent select are removed by setting the length of
their options property to 1.

e.g. (play code):

function updateSel( sel ){
function getNextSel (sel) {
var selNum = sel.name.split('_')[1];
return sel.form.elements['sel_' + (+selNum+1)];
}
var nextSel = getNextSel(sel);

// set the options for the next select
// based on the seleted option

// Now clear any subsequent select
while (nextSel = getNextSel(nextSel)) {
nextSel.options.length = 1;
}
}

Untested of course, but hopefully you get the idea.

 

[Jason]

I would create a scheme for the select names, like:

<select name="sel_1" onchange="updateSel(this);" ...>
<option></option>
</select>
<select name="sel_2" onchange="updateSel(this);" ...>
<option></option>
</select>

and so on. Each would have a default first option. Whenever any
option is modified, the options for the next select are inserted and
those of any subsequent select are removed by setting the length of
their options property to 1.

e.g. (play code):

function updateSel( sel ){
function getNextSel (sel) {
var selNum = sel.name.split('_')[1];
return sel.form.elements['sel_' + (+selNum+1)];
}
var nextSel = getNextSel(sel);

// set the options for the next select
// based on the seleted option

// Now clear any subsequent select
while (nextSel = getNextSel(nextSel)) {
nextSel.options.length = 1;
}

}

Untested of course, but hopefully you get the idea.

Excellent idea, Rob, thanks. I follow your logic there, and I'm pretty
sure it will work perfectly!

Jason