PDA

View Full Version : 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


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

<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