View Full Version : Changing form options!

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 name="box2">
<option>default value</option>

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


11-14-2005, 06:23 PM

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

var store = new Array();

store[0] = new Array(

store[1] = new Array(
'Web Designer\'s Forum',
'CSS1 Mastergrid',

store[2] = new Array(
'Stefan Koch\'s JavaScript Tutorial',
'Client Side JavaScript Reference',
'Web Designer\'s Forum',

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;
box2.options[i/2] = new Option(list[i],list[i+1]);


<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>

<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>

11-15-2005, 12:12 PM
You need to construct something like this for the second box:

<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>
<input type="text" id="tb"/>

11-15-2005, 12:25 PM
Awsome, this works great.