...

View Full Version : DDL element based on radio button group



korssane
10-07-2011, 09:48 PM
Hi i have 2 radios :

what i need is once i choose the 1st radio i will get 1st DDL with folollwing element :

Orange
Apple
Kiwi


if i chose the 2nd radio i should have the 2nd DDL with :

Potato
Tomato
legume

?

thanks

niralsoni
10-07-2011, 10:06 PM
use AJAX call for the same

korssane
10-08-2011, 01:53 AM
thanks my friend wondering how we can do it using ajax ?

Old Pedant
10-08-2011, 06:21 AM
There is *NO* reason to use AJAX for something this dirt simple.



<html>
<head>
<script type="text/javascript">
var lists = [
[ "Orange", "Apple", "Kiwi", "Watermelon", "Banana" ],
[ "Potato", "Tomato", "Legume" ]
];

function rbChoose( rb )
{
var sel = rb.form.TheList;
sel.options.length = 0;
var list = lists[ Number(rb.value) ];
for ( var i = 0; i < list.length; ++i )
{
sel.options[i] = new Option( list[i], list[i] );
}
}
</script>
</head>
<body>
<form>
Which food?
<label><input type="radio" name="food" value="0" onclick="rbChoose(this);"/> Fruit</label>
<label><input type="radio" name="food" value="1" onclick="rbChoose(this);"/> Vegetables</label>
<br/>
<select name="TheList">
<option>--choose fruit or vegetable--</option>
</select>
</form>
</body>
</html>

As you can see, you can have as many items in each list as you want.

You can also have as many lists (and radio buttons) as you want.

korssane
10-15-2011, 03:21 AM
Hi Old P.

How come if i want to show those items in a display but assign different values to them in back end like :

<option value="1" > Orange</option>
<option value="2" > Apple</option>
<option value="3" > Kiwi</option>

and so on

also is there a way to assign a loop values to those list items instead of adding them manually ..
let say the values i want in my DDl are the following based on rb1 :


<option value="1" > Temp1</option>
<option value="2" > Temp2</option>
<option value="3" > Temp3</option>
<option value="4" > Temp4</option>
till ..

<option value="10" > Temp10</option>

and so..can we have it generic this way ?


and based on rb2 :

<option value="1" > Temp1</option>
<option value="2" > Temp2</option>
<option value="3" > Temp3</option>
<option value="4" > Temp4</option>
till
<option value="20" > Temp20</option>

Thanks

Old Pedant
10-15-2011, 04:34 AM
Answering the first question:


<html>
<head>
<script type="text/javascript">
var lists = [
{ "Orange" : 1, "Apple" : 2, "Kiwi" : 3, "Watermelon" : 4, "Banana" : 5 },
{ "Potato" : 137, "Tomato" : 2817, "Legume" : 991 }
];

function rbChoose( rb )
{
var sel = rb.form.TheList;
sel.options.length = 0;
var list = lists[ Number(rb.value) ];
for ( var name in list )
{
sel.options[sel.options.length] = new Option( name, list[name] );
}
}
</script>
</head>
<body>
<form>
Which food?
<label><input type="radio" name="food" value="0" onclick="rbChoose(this);"/> Fruit</label>
<label><input type="radio" name="food" value="1" onclick="rbChoose(this);"/> Vegetables</label>
<br/>
<select name="TheList" onchange="alert(this.value);">
<option>--choose fruit or vegetable--</option>
</select>
</form>
</body>
</html>

Old Pedant
10-15-2011, 04:37 AM
Answering second question:


<html>
<head>
<script type="text/javascript">
var ranges = [
[ 1, 20 ],
[ 331, 336 ]
];

function rbChoose( rb )
{
var sel = rb.form.TheList;
sel.options.length = 0;
var range = ranges[ Number(rb.value) ];
for ( var i = range[0]; i <= range[1]; ++i )
{
sel.options[sel.options.length] = new Option( "Temp" + i, i );
}
}
</script>
</head>
<body>
<form>
Which range?
<label><input type="radio" name="which" value="0" onclick="rbChoose(this);"/> Low numbers</label>
<label><input type="radio" name="which" value="1" onclick="rbChoose(this);"/> High numbers</label>
<br/>
<select name="TheList" onchange="alert(this.value);">
<option>--choose range--</option>
</select>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum