Click to See Complete Forum and Search --> : Replace select option values from another select box
I have two select boxes and a check box that acts like a toggle switch.
Upon checking the check vox, I want to be able to replace the values in first box with the value in second box.
Upon unchecking, I want to be able to restore the original values in first box.
Does any body have any similar example that I can look at to get started?
Thanks in advance
<html>
<head>
<title>Untitled</title>
</head>
<body>
Replace 'A' with 'B'<input type="checkbox" name="toggle_switch">
<select name="groupA">
<option value="1">1custA</option>
<option value="2">2custA</option>
<option value="3">3custA</option>
<option value="4">4custA</option>
<option value="5">5custA</option>
</select>
<select name="groupB">
<option value="1">1custB</option>
<option value="2">2custB</option>
<option value="3">3custB</option>
<option value="4">4custB</option>
<option value="5">5custB</option>
</select>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<script>
function toggle(cb, f){
for(i=0;i<5;i++){
var groupA = f.groupA1.options[i].text;
var groupB = f.groupB2.options[i].text;
f.groupB2.options[i].text=groupA;
f.groupA1.options[i].text=groupB;
}
}
</script>
</head>
<body>
<form>
Replace 'A' with 'B'<input type="checkbox" name="toggle_switch" onClick="toggle(this, this.form)">
<select name="groupA1">
<option value="1">1custA</option>
<option value="2">2custA</option>
<option value="3">3custA</option>
<option value="4">4custA</option>
<option value="5">5custA</option>
</select>
<select name="groupB2">
<option value="1">1custB</option>
<option value="2">2custB</option>
<option value="3">3custB</option>
<option value="4">4custB</option>
<option value="5">5custB</option>
</select>
</form>
</body>
</html>
Jona - Thanks again :)
I have a problem.It doesnt seem to work if I change the loop to for(i=0; i < length; i++).Since it is a dynamically generated list,it is not necessary that there are only 5 values.
Also, I want to be able to toggle only groupA1 values.groupB1 values should remain unaltered.In other words, when I check the box,I want replace the values of groupA1 with that of groupB2, while groupB2 remains unchanged..
When I uncheck,groupA1 should populate its original values back while groupB2 remains unchanged..
Thanks,
<script type="text/javascript" language="javascript">
<!--
function toggle(f){
for(var i=0;i<f.groupA1.options.length;i++){
var groupA = f.groupA1.options[i].text;
var groupB = f.groupB2.options[i].text;
f.groupA1.options[i].text=groupB;
} }
// -->
</script>
Using a checkbox (if checked, if not checked) does not work. It only changes it permanently.
Is there a way to store the original values of groupA1 and display it when unchecked?
That's what the variable groupA does. I am extremely busy today, but will work on it when I have the time. ;)
I got this working...
can someone help me as to how I can build an array dynamically.I've hardcoded the option values in JS now.
<HTML><BODY>
<SCRIPT>
var one = new Array(
new Array("A1", "1"),
new Array("A2", "2"),
new Array("A3", "3")
);
var two = new Array(
new Array("B1","A"),
new Array("B2", "B"),
new Array("B3", "C")
);
function fill( sel, ar )
{
var ix;
for ( ix = sel.options.length-1; ix >= 0; --ix )
sel.options[ix] = null;
for ( ix = 0; ix < ar.length; ++ix )
sel.options[ix] = new Option( ar[ix][0], ar[ix][1] );
}
function swap( cb )
{
if ( cb.checked )
{
left = two;
right = two;
} else {
left = one;
right = two;
}
var frm = cb.form;
fill( frm.LeftSel, left );
fill( frm.RightSel, right );
}
</SCRIPT>
<FORM Name="Test">
<SELECT Name="LeftSel" >
<option value="selected">This is A</option>
</SELECT>
<SELECT Name="RightSel" >
<option value="selected">This is B</option>
</SELECT>
<INPUT Type=Checkbox Name="CB" onClick="swap(this);">
</FORM>
<SCRIPT>
swap( document.Test.CB );
</SCRIPT>
</BODY></HTML>
building array...error...object expected
I get this error when I try building the array this way.I dont know where I'm going wrong.
Please can some one help me?
Thanks
<HTML><BODY>
<SCRIPT>
var one = new Array(
LeftSel.options[i].text;
);
var two = new Array(
RightSel.options[i].text;
);
function fill( sel, ar )
{
var ix;
for ( ix = sel.options.length-1; ix >= 0; --ix )
sel.options[ix] = null;
for ( ix = 0; ix < ar.length; ++ix )
sel.options[ix] = new Option( ar[ix][0], ar[ix][1] );
}
function swap( cb )
{
if ( cb.checked )
{
left = two;
right = two;
} else {
left = one;
right = two;
}
var frm = cb.form;
fill( frm.LeftSel, left );
fill( frm.RightSel, right );
}
</SCRIPT>
<FORM Name="Test">
<SELECT Name="LeftSel" >
<option value="1">1custA</option>
<option value="2">2custA</option>
<option value="3">3custA</option>
<option value="4">4custA</option>
<option value="5">5custA</option>
</SELECT>
<SELECT Name="RightSel" >
<option value="1">1custB</option>
<option value="2">2custB</option>
<option value="3">3custB</option>
<option value="4">4custB</option>
<option value="5">5custB</option>
</SELECT>
<INPUT Type=Checkbox Name="CB" onClick="swap(this);">
</FORM>
<SCRIPT>
swap( document.Test.CB );
</SCRIPT>
</BODY></HTML>
I get two errors.
expecting ')'
and at <INPUT Type=Checkbox Name="CB" onClick="swap(this);">
I cant figure out what I'm doing
Mili, your arrays for one, should not have a semi-colon after them:
var one = new Array(
LeftSel.options[i].text
);
var two = new Array(
RightSel.options[i].text
);
Also, you need to put this in a function and in a for() loop (or else, "i" is undefined). Make sure you change LeftSel to document.Test.LeftSel and the same with RightSel. Put it in a function, say, init() and use <body onload="init()">. Also, before the function, put var one, two; That way the variables will be passed through all of your functions.
Jona,
Thanks for identifying my errors.It was indeed a silly error.I'm still in the process of learning JS.It is even more annoying since I'm trying to use it in xslt.I fixed it anyways..
Thanks for you time.Couldnt have done without your help:)It is is good leaning curve for me.
<SCRIPT>
var frm = document.Test;
var one = new Array( );
var two = new Array( );
function fillArray( ar, sel )
{
for ( var ix = 0; ix < sel.options.length; ++ix )
{
var opt = sel.options[ix];
ar[ix] = new Array( opt.text, opt.value );
}
}
fillArray( one, frm.LeftSel );
fillArray( two, frm.RightSel );
function fill( sel, ar )
{
var ix;
for ( ix = sel.options.length-1; ix >= 0; --ix )
sel.options[ix] = null;
for ( ix = 0; ix < ar.length; ++ix )
sel.options[ix] = new Option( ar[ix][0], ar[ix][1] );
}
function swap( cb )
{
if ( cb.checked )
{
left = two;
right = two;
} else {
left = one;
right = two;
}
var frm = cb.form;
fill( frm.LeftSel, left );
fill( frm.RightSel, right );
}
</SCRIPT>
Hey, it's no problem. I'm always here and happy to help you. ;)