homepage Welcome to WebmasterWorld Guest from 54.227.12.219
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Hiding / Displaying ComboBoxes
futureX




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

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

 

MikeFoster




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

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>


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved