radio buttons selecting options in drop down

Hi, im try to write a java script that selects a differnt option in my drop down list on a click event can anyone help? heres what i have so far:


<script type="text/javascript">


var three = ['UK 4 - EU 37' ];
var four = ['UK 5 - EU 37' ];
var five = ['UK 6 - EU 37' ];
var six = ['UK 7 - EU 37' ];

function Populate(t,IDS) {
s = document.getElementById(IDS);
var sl = s.options.length;
for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
var arr = [];
switch (t.value) {

case 'three' : arr = three; break;
case 'four' : arr = four; break;
case 'five' : arr = four; break;
case 'six' : arr = four; break;

default : alert('Sorry this size is not currently available, Please try a differnt boot style.'); break;
}
var l = arr.length;
for(i = 0; i < l; i++ ) {
s.options[i] = new Option(arr[i],arr[i],false,false);
}
}

</script>

<form id="aform">

option 1<input type="radio" name="footsize" value="three" onClick="Populate(this,'mymenu">
option 2<input type="radio" name="footsize" value="four" onClick="Populate(this,'mymenu')">
option 3<input type="radio" name="footsize" value="five" onClick="Populate(this,'mymenu')">
option 4<input type="radio" name="footsize" value="six" onClick="Populate(this,'mymenu')">

<select id="mymenu" size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
</select>
</form>

hi,

there was a typo in the onclick for the first radio button

Now Fixed

<script type="text/javascript">


var three = ['UK 4 - EU 37' ];
var four = ['UK 5 - EU 37' ];
var five = ['UK 6 - EU 37' ];
var six = ['UK 7 - EU 37' ];

function Populate(t,IDS) {

s = document.getElementById(IDS);
var sl = s.options.length;
for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
var arr = [];
switch (t.value) {

case 'three' : arr = three; break;
case 'four' : arr = four; break;
case 'five' : arr = five; break;
case 'six' : arr = six; break;

default : alert('Sorry this size is not currently available, Please try a differnt boot style.'); break;
}
var l = arr.length;
for(i = 0; i < l; i++ ) {
s.options[i] = new Option(arr[i],arr[i],false,false);
}
}

</script>

<form id="aform">

option 1<input type="radio" name="footsize" value="three" onClick="Populate(this,'mymenu')">
option 2<input type="radio" name="footsize" value="four" onClick="Populate(this,'mymenu')">
option 3<input type="radio" name="footsize" value="five" onClick="Populate(this,'mymenu')">
option 4<input type="radio" name="footsize" value="six" onClick="Populate(this,'mymenu')">

<select id="mymenu" size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
</select>
</form>


The dropdown box now fills with the info from the array

sorry that was not quite what i was trying to do i need something a bit more like this:




<form id="aform">

option 1<input type="radio" name="footsize" value="three" onClick="document.aform.mymenu.value=option[0]">

option 2<input type="radio" name="footsize" value="four" onclick="document.aform.mymenu.value=option[1]">

option 3<input type="radio" name="footsize" value="five" onClick="document.aform.mymenu.value=option[2]">

option 4<input type="radio" name="footsize" value="six" onClick="document.aform.mymenu.value=option[3]">

<select id="mymenu" size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
</select>
</form>




can anyone tell me how im meant to code this ?

<form id="aform">
option 1<input type="radio" name="footsize" value="six" onClick="document.getElementById('mymenu').value = 'nothing'">

option 2<input type="radio" name="footsize" value="three" onClick="document.getElementById('mymenu').value = 'http://www.dynamicdrive.com'">

option 3<input type="radio" name="footsize" value="four" onClick="document.getElementById('mymenu').value = 'http://www.codingforums.com'">

option 4<input type="radio" name="footsize" value="five" onClick="document.getElementById('mymenu').value = 'http://www.cssdrive'">


<select id="mymenu" size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
</select>
</form>



He thought he saw an Albatross
That fluttered round the lamp:
He looked again, and found it was
A Penny-Postage Stamp.
"You'd best be getting home," he said:
"The nights are very damp!"
- Lewis Carroll

thats much better thanks but what if the drop down list was populated dynamically is there a way to just select a option eg option1 option2 etc etc

Hi all,

I'm after something similar to the original post.
Is there a way we can also get the value set dynamically also?

Basically I'm after 2 radio buttons that dictate the options on the drop down.
Then for each option I need it to carry across its value which will be different to the option name e.g.

<option value="op1">This is option1</option>

Thanks :)

Hi all,

I'm after something similar to the original post.
Is there a way we can also get the value set dynamically also?

Basically I'm after 2 radio buttons that dictate the options on the drop down.
Then for each option I need it to carry across its value which will be different to the option name e.g.

<option value="op1">This is option1</option>

Thanks :)

Might be better to start your own thread with a reference to this one.
However, I added a few dummy elements for demonstration and a button to get current value set.

<html>
<head>
<title>RBtn SBox Setup</title>

<script type="text/javascript">
// From: http://codingforums.com/showthread.php?t=167230

var three = ['UK 4 - EU 37' ,'4-2','4-3','4-4'];
var four = ['UK 5 - EU 37' ,'5-1','5-2','5-3','5-4'];
var five = ['UK 6 - EU 37' ,'6a','6b','6c'];
var six = ['UK 7 - EU 37' ,'7b','7c','7d','7e'];

function Populate(t,IDS) {
s = document.getElementById(IDS);
var sl = s.options.length;
for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
var arr = [];
switch (t.value) {

case 'three' : arr = three; break;
case 'four' : arr = four; break;
case 'five' : arr = five; break;
case 'six' : arr = six; break;

default : alert('Sorry this size is not currently available, Please try a differnt boot style.'); break;
}
var l = arr.length;

// Following is option if want directions in first field of select box
s.options[s.length] = new Option('Select','',false,false);

for(i = 0; i < l; i++ ) {
// s.options[i] = new Option(arr[i],arr[i],false,false);
s.options[s.length] = new Option(arr[i],arr[i],false,false);
}
}

function CurrentValue(IDS) {
return document.getElementById(IDS).value;
}
</script>
</head>
<body>
<form id="aform" onsubmit="return false">

option 1<input type="radio" name="footsize" value="three" onClick="Populate(this,'mymenu')">
option 2<input type="radio" name="footsize" value="four" onClick="Populate(this,'mymenu')">
<br>
option 3<input type="radio" name="footsize" value="five" onClick="Populate(this,'mymenu')">
option 4<input type="radio" name="footsize" value="six" onClick="Populate(this,'mymenu')">

<br>
<select id="mymenu" size="1">
<option value="nothing" selected="selected">Select a site</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
</select>
<button onclick="alert(CurrentValue('mymenu'))">Current value</button>
</form>
</body>
</html>

Remove 2 of the radio button options ... Is this close to what you need?

Hi.
Yes this is exactly what I'm after - thanks :)

You're most welcome.
Glad we could help.
Hopefully it helps the original OP as well.
Good Luck!
:)