Changing form options!

**Chopper77** · 11-14-2005, 05:22 PM

Can anybody figure this out?

I want to create 2 or 3 dropdown list boxes. When a particular option is selected in the first box, the options in the second box change.
This is what I have so far:

[<form name="form1" method="post" action="">
<select name="box1">
<option>Value 1</option>
<option>value 2</option>
<option value="document.form1.box2.options=new Option('New Option','');">value 3</option>
</select>
<select name="box2">
<option>default value</option>
</select>
</form>]

Am I going about this the completely wrong way, maybe I should be thinking about dynamic boxes? how do you do them??

Aghhh
Thanks
Chopper

**Twey** · 11-14-2005, 06:23 PM

http://www.quirksmode.org/js/options.html

**Chopper77** · 11-15-2005, 11:33 AM

Ah thanks, thats great, but!

How can I adapt this so that when something on the second menu is selected it fills a text box with information.
I.e The first list is categories, the second list is products, and then a text box with info about the selected product.

Any ideas how to do this?

Many thanks

Code:

<script>
var store = new Array();

store[0] = new Array(
	'PJP100','',
	'PJP120','',
	'PJP200FC','',
	'PJP200F');

store[1] = new Array(
	'Web Designer\'s Forum',
	'http://www.wdf.net',
	'CSS1 Mastergrid',
	'http://webreview.com/wr/pub/guides/style/mastergrid.html');

store[2] = new Array(
	'Stefan Koch\'s JavaScript Tutorial',
	'http://rummelplatz.uni-mannheim.de/~skoch/js/tutorial.htm',
	'Client Side JavaScript Reference',
	'http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm',
	'Web Designer\'s Forum',
	'http://www.wdf.net');


function init()
{
	optionTest = true;
	lgth = document.forms[0].second.options.length - 1;
	document.forms[0].second.options[lgth] = null;
	if (document.forms[0].second.options[lgth]) optionTest = false;
}


function populate()
{
	if (!optionTest) return;
	var box = document.forms[0].first;
	var number = box.options[box.selectedIndex].value;
	if (!number) return;
	var list = store[number];
	var box2 = document.forms[0].second;
	box2.options.length = 0;
	for(i=0;i<list.length;i+=2)
	{
		box2.options[i/2] = new Option(list[i],list[i+1]);
	}
}

</script>
</head>

<BODY onLoad="init()">
<form action="#">
<select name="first" onchange="populate()"><option>Please select paper type</option><option value="0">Professional Proofing</option><option value="1">Contract Proofing</option><option value="2">Architectural/CAD</option><option value="3">Fine Art Media</option><option value="4">Display Graphic Media</option></select>
<br>

<select name="second" onchange="go()"><option value="http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/">Client Side JavaScript Reference</option><option value="http://www.evolt.org">Evolt</option></select>
</form>
</body>

**Twey** · 11-15-2005, 12:12 PM

You need to construct something like this for the second box:

Code:

<select onchange="document.getElementById('tb').value = this.value;">
  <option value="The MK500 is wonderful.  Buy it!">MK500</option>
  <option value="The MK750 is even better.  Buy this too!">MK750</option>
</select>
<input type="text" id="tb"/>

**Chopper77** · 11-15-2005, 12:25 PM

Awsome, this works great.
Thanks

Thread: Changing form options!

Thread Tools

Search Thread

Changing form options!

Bookmarks

Bookmarks

Posting Permissions