Welcome to WebmasterWorld Guest from 54.167.155.147

Forum Moderators: open

Message Too Old, No Replies

Hiding / Displaying ComboBoxes

   
2:10 am on Jan 8, 2005 (gmt 0)

10+ Year Member



Hi guys, long time no post. I'm a little new to javascript and have created a nice form using javascript (so i can show the calculation from the form on-the-fly) now i need to add an if statement or command to show or hide a number of options depending on the option specified in the first field, best way to simplify and describe it is thus;

lets say the first combobox consists of the following values;

1
2
3

if 1 was selected i would like 1 extra combo box to appear or become available with the second list of variables in, lets say that was;

a
b
c

I will say that the content of each of the second value boxes is the same list of values, but each needs to be unique as i have used it in a calculation.

So for example if i selected 1 in the first combo box, one more popup box would appear, if i select 2 then two would appear etc...

Thanks in advance

4:58 am on Jan 9, 2005 (gmt 0)

10+ Year Member



This little demo might be helpful.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type='text/javascript'>
window.onload = function()
{
var sel = document.forms['form1'].sel;
if (sel && sel[0].style) {
sel[0].onchange = selOnChange;
for (var i = 1; i < sel.length; ++i) {
sel[i].style.display = 'none';
}
}
}
function selOnChange()
{
var sel = this.form.sel;
var max = parseInt(this.options[this.selectedIndex].text);
for (var i = 1; i < sel.length; ++i) {
sel[i].style.display = (i <= max)? 'inline' : 'none';
}
}
</script>
</head>
<body>

<form id='form1'>
<select name='sel'>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name='sel'>
<option>Eggs</option>
<option>Bagels</option>
<option>Cereal</option>
</select>
<select name='sel'>
<option>Soup</option>
<option>Fruit</option>
<option>Salad</option>
<option>Sandwich</option>
</select>
<select name='sel'>
<option>Fish</option>
<option>Pork</option>
<option>Steak</option>
<option>Chicken</option>
</select>
</form>

</body>
</html>