Menu
Can anyone help?
Lets say you have a group of radio buttons with values of A, B, and C
I want to have a drop down box, on the same page that the values are changed by which radio button is selected
so if radio value A is selected then the drop down will have values of f1, x2, i3
if radio value B is selected then drop down will have values m1, r4, g3
and so on and so forth.
<i>
</i><script type="text/javascript">
function change(arr) {
var el = document.getElementById('sel');
el.options.length = 0;
for(var i = 0; i< arr.length; i++ ) {
el.options[el.options.length] = new Option( arr[i], arr[i]);
}
}
</script>
<input type="radio" name="rad" id="r0" onclick='change(["f1", "x2", "i3"]) '><label for="r0"> one </label><br>
<input type="radio" name="rad" id="r1" onclick='change(["m1", "r4", "g3"]) '><label for="r1">two </label><br>
<select id="sel"></select>
[CODE]
function changer(jseries, jname, jimg, jdesc)
{
var HTML = '<span class="bgseries">' + jseries + '-Series</span><br /><span class="bgname">' + jname + '</span><br /><img src="pics/' + jimg + '"/><br /><span class="bgdetail">' + jdesc + '</span>';
document.getElementById('change').innerHTML = HTML;
var selbox = document.bucket.bwidth;
selbox.options.length = 0;
selbox.options[selbox.options.length] = new Option('Choose Width','No');
<?php
$con = mysql_connect("localhost","DATABASE","PASSWORD");
if (!$con)
connecterror();
else
{
mysql_select_db("database", $con);
$seriesa = mysql_query("SELECT DISTINCT Series FROM cbucket");
while($var = mysql_fetch_array($seriesa))
{
$seriesc = $var['Series'];
echo 'if (jseries == "'.$seriesc.'") {';
$widths = mysql_query("SELECT Width FROM cbucket WHERE Series = '$seriesc'");
while ($var2 = mysql_fetch_array($widths))
{
echo 'selbox.options[selbox.options.length] = new Option(''.$var2['Width'].'"',''.$var2['Width'].'');
';
}
echo '}
';
}
mysql_close($con);
}
?>
}
</script>
[/CODE]<i>
</i><html>
<head>
<title>Limit Selections</title>
</head>
<body>
<input type="radio" name="first" value="1" onclick="choice(this)">A
<input type="radio" name="first" value="2" onclick="choice(this)">B
<input type="radio" name="first" value="3" onclick="choice(this)">C
<br>
<select id='second'>
</select>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=163152
function choice(t){
var a = [1,2,3];
var b = [4,5,6,7];
var c = [8,9,10];
s = document.getElementById('second');
var sl = s.options.length;
for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
if(t.value != 0){
var z;
switch (t.value) {
case '1' : z = a; break;
case '2' : z = b; break;
case '3' : z = c; break;
default : alert('Invalid entry'); break;
}
var l = z.length;
for(i = 0; i < l; i++ ) { s.options[i] = new Option(z[i],z[i],false,false); }
}
}
</script>
</body>
</html>
<i>
</i><html>
<head>
<title>Limit Selections</title>
</head>
<body>
<input type="radio" name="first" value="1" onclick="choice(this)">1
<input type="radio" name="first" value="2" onclick="choice(this)">2
<input type="radio" name="first" value="3" onclick="choice(this)">3
<select id='second' onchange="alert(this.value)"></select>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=163152
function choice(t){
// format of array fields Display:Value
var a = [':','A:1','B:2','C:3'];
var b = [':','A:4','B:5','C:6'];
var c = [':','A:7','B:8','C:9'];
s = document.getElementById('second');
var sl = s.options.length;
for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
if(t.value != 0){
var z;
switch (t.value) {
case '1' : z = a; break;
case '2' : z = b; break;
case '3' : z = c; break;
default : alert('Invalid entry'); break;
}
var l = z.length;
for(i = 0; i < l; i++ ) {
tmp = z[i].split(':');
s.options[i] = new Option(tmp[0],tmp[1],false,false);
}
}
}
</script>
</body>
</html>
2. Later, the user can change the turn-around time, which changes the price
BUT they do not change the selection --- correct?[/QUOTE]
[CODE]<html>
<head>
<script type="text/javascript">
function choice(t) {
//prices for one week turnaround
var a = ['Item One:10','Item Two:20','Item Three:30'];
//prices for three days turnaround
var b = ['Item One:15','Item Two:25','Item Three:35'];
// prices for same day turnaround
var c = ['Item One:20','Item Two:30','Item Three:40'];
s = document.getElementById('items');
var sl = s.options.length;
for(var i = sl-1; i >= 0 ; i--) { s.options[i] = null; }
if(t.value != 0){
var z;
switch (t.value) {
case '1' : z = a; break;
case '2' : z = b; break;
case '3' : z = c; break;
default : alert('Invalid entry'); break;
}
var l = z.length;
alert(z);
for(i = 0; i < l; i++ ) {
tmp = z[i].split(':');
s.options[i] = new Option(tmp[0],tmp[1],false,false);
}
}
}
function computePrice(form) {
var num_items = 0;
var total_cost = 0;
// set number of items
if (document.myform.num_items.value!="" && !isNaN(document.myform.num_items.value) )
{
num_items = parseInt(document.myform.num_items.value);
}
// set item
var items = parseInt(document.myform.items.value );
// calculate total cost
var total_cost = items * num_items;
// display total cost
document.getElementById('total_cost').innerHTML = "Total Cost is: $" + total_cost;
}
</script>
</head>
<body>
<form id="myform" name="myform">
<!-- my items -->
<select id="items" onChange="computePrice(this)">
<option value="10">Item One</option>
<option value="20">Item Two</option>
<option value="30">Item Three</option>
</select><br>
<input type="text" value="0" id="num_items" onkeyup="computePrice(this)"><br><br>
<!-- turnaround time -->
<input type="radio" name="turnaround" value="1" checked="checked" onClick="choice(this);computePrice(this);">Deliver in one week
<input type="radio" name="turnaround" value="2" onClick="choice(this);computePrice(this);">Deliver in three days
<input type="radio" name="turnaround" value="3" onClick="choice(this);computePrice();">Deliver in one day!<br><br>
</form>
<div id="total_cost">Total Cost: $0</div>
</body>
</html>[/CODE]<i>
</i><html>
<head>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=980767#post980767
var turnaround_prices = [
//item 1, 2, 3
['10','20','30'], // prices for one week turnaround
['15','25','35'], // prices for three days turnaround
['20','30','40'] // prices for same day turnaround
];
function getRBtnName(GrpName) {
var sel = document.getElementsByName(GrpName);
var fnd = -1;
var str = '';
for (var i=0; i<sel.length; i++) {
if (sel[i].checked == true) { str = sel[i].value; fnd = i; }
}
return fnd; // return option index of selection
// comment out next line if option index used in line above <br/>
// return str;
}
function computePrice() {
var vndx = getRBtnName('turnaround');
var num_items = 0;
var total_cost = 0;
num_items = parseInt(document.myform.num_items.value);
if (isNaN(num_items) ) { alert('Need quantity'); return }
selected_Item = document.myform.items.selectedIndex;
var items = turnaround_prices[vndx][selected_Item];
// calculate total cost
var total_cost = items * num_items;
// display total cost
document.getElementById('total_cost').innerHTML = "Total Cost is: $" + total_cost;
}
</script>
</head>
<body>
<form id="myform" name="myform">
<!-- my items -->
<select id="items" onchange="computePrice()">
<option value="0">Item One</option>
<option value="1">Item Two</option>
<option value="2">Item Three</option>
</select>
Quantity:<input type="text" value="" id="num_items" size="3" onkeyup="computePrice()"><br><br>
<!-- turnaround time -->
<input type="radio" name="turnaround" value="0" onClick="computePrice();">Deliver in one week
<input type="radio" name="turnaround" value="1" onClick="computePrice();">Deliver in three days
<input type="radio" name="turnaround" value="2" onClick="computePrice();">Deliver in one day!<br><br>
</form>
<div id="total_cost">Total Cost: $0</div>
</body>
</html>
Hello,
my general problem is change the dropdown list to radio button on Available Options .
I found the code, but not for version 1.4.
Can someone help me?
Thanx for results.[/QUOTE]
0.1.9 — BETA 5.20