<select> question - JavaScript - Forums at ProgrammersHeaven.com

JavaScript

Moderators: None (Apply to moderate this forum)

Number of threads: 2058
Number of posts: 5158

With full replies

Topics only

JavaScript

Forum Info

This Forum Only

Single Post View Linear View Threaded View f

Printer Friendly

RSS Feed

<select> question Posted by anthony78 on 28 Jul 2003 at 8:04 PM

Hi all,

I have 2 programming problems hope someone can help me. (solutions in javascript or html is fine with me).

i have 2 html <select> tags, let name them A and B

Now suppose A <select> tags got <options> d, f, g

now suppose B <select> tag is 'dependant' on A, example
if in A <option> d is selected, B will have <options> x, y , z
if in A <option> e is selected, B will have <options> H, i, j, k, l (notice the numuber of options difference)

How do i achieve this? i know one of the methods is to display the highest num of selection options(in this case, 5) and blank out(set to null) the values of the option when different option in A is selected but that would look unpresentable on the page.

Once the above problem is solve, then another question is related to above, suppose

<option value="h"> apple </option>
<option value="i"> orange </option>
<option value="j"> pear </option>

how do i change the "apple", "orange", and "pear" when the option changes??

Forgive my English and Thanks in advance to those who will help me.

Share By Email

Re: <select> question Posted by lillu on 29 Jul 2003 at 10:08 AM

Hi,

There are many ways to do this, so this is just one of them.

I roughly explain what it does:

1. Code one of the options (eg. Fruit - Apple, Pear) into html so that it will always be displayed when the page is loaded.
2. In the function, create the object you want to change dynamically
sel = the second list box, where the things change
3. Set sel's options' length to zero (very important, or it will grow endlessly
4. Create Option arrays with your choices to appear, you will reference them by their value handle

<html>
<head>
<script language="javascript">
function setOptions(o)
{
var sel = document.myform.option2;

sel.options.length = 0;

if (o == "1")
{
sel.options[sel.options.length] = new Option('Apple');
sel.options[sel.options.length] = new Option('Pear');
}
if (o == "2")
{
sel.options[sel.options.length] = new Option('Carrot');
sel.options[sel.options.length] = new Option('Potatoe');
}
if (o == "3")
{
sel.options[sel.options.length] = new Option('Chicken');
sel.options[sel.options.length] = new Option('Fish');
}
}
</script>
</head>
<body>

<form name="myform">
<select name="option1" size="1" onchange="setOptions(document.myform.option1.options[document.myform.option1.selectedIndex].value);">
<option value="1">Fruit</option>
<option value="2">Vegetable</option>
<option value="3">Meat</option>
</select>
<br />
<br />
<select name="option2" size="1">
<option>Apple</option>
<option>Pear</option>
</select>
</form>

</body>
</html>

Basically, this is it. If you have any questions feel free to ask them.

Lillu
: Hi all,
:
: I have 2 programming problems hope someone can help me. (solutions in javascript or html is fine with me).
:
: i have 2 html <select> tags, let name them A and B
:
: Now suppose A <select> tags got <options> d, f, g
:
: now suppose B <select> tag is 'dependant' on A, example
: if in A <option> d is selected, B will have <options> x, y , z
: if in A <option> e is selected, B will have <options> H, i, j, k, l (notice the numuber of options difference)
:
: How do i achieve this? i know one of the methods is to display the highest num of selection options(in this case, 5) and blank out(set to null) the values of the option when different option in A is selected but that would look unpresentable on the page.
:
: Once the above problem is solve, then another question is related to above, suppose
:
: <option value="h"> apple </option>
: <option value="i"> orange </option>
: <option value="j"> pear </option>
:
: how do i change the "apple", "orange", and "pear" when the option changes??
:
: Forgive my English and Thanks in advance to those who will help me.
:

Share By Email

JavaScript

Recent Jobs