Dual
Select Boxes
Creates
two list boxes and allows you to move elements back and forth.
Code
Produces
Notes
[nowrap [gadgets.dualselect;
options1=['One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
']]]
[gadgets.dualselect;
options1=['One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
']]
Default;
you must pass at least options1 (left select) or options2 (right select)
[nowrap [var a.options1=['One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
']]]
[var a.options1=['One
Two
Three
Four
Five
Six
Seven
Eight
Nine
Ten
']]
Setting
variable for use in examples.
[nowrap [gadgets.dualselect;
name1="left";
name2="right";
options1=a.options1;
single=1]]
[gadgets.dualselect;name1="left";name2="right";options1=a.options1;single=1]
Set the
select names using name1 and name2. Names MUST be unique within the form.
Do not allow multiple selections. (single1/single2 also available.)
[nowrap [gadgets.dualselect;
name1="left2";
name2="right2";
options1=a.options1;
sort1="value";
sort2="text"]]
[gadgets.dualselect;name1="left2";name2="right2";options1=a.options1;sort1="value";sort2="text"]
Show sort buttons and sort select 1 by values, sort select 2 by text. Can also set both sorts by just using sort="text" or "value".
[nowrap [gadgets.dualselect;
name1="left2a";
name2="right2a";
options1=a.options1;
selectall=1;
sort2="text"]]
[gadgets.dualselect;
name1="left2a";
name2="right2a";
options1=a.options1;
selectall=1;
sort2="text"]
selectall/selectall1/selectall2
creates a "Select All" button for the select.
[nowrap [gadgets.dualselect;
name1="left3";
name2="right3";
options1=a.options1;
autosort1="value";
autosort2="text"]]
[gadgets.dualselect;name1="lef3t";name2="right3";options1=a.options1;autosort1="value";autosort2="text"]
Autosort select 1 by values, autosort select 2 by text. Can also set both to autosort by just using autosort="text" or "value".
[nowrap [gadgets.dualselect;
name1="left4";
name2="right4";
options1=a.options1;
autosort1="value";
sort2="text";
updown2=1;]]
[gadgets.dualselect;
name1="left4";
name2="right4";
options1=a.options1;
autosort1="value";
sort2="text";
updown2=1;]
Autosort
select 1 by values, allow button to sort select 2 by text, also allow
buttons to move items in select 2 up or down. (updown/updown1 also available.)
[nowrap [gadgets.dualselect;
name1="left4a";
name2="right4a";
options1=a.options1;
topbottom=1;
sort2="text";
updown2=1;]]
[gadgets.dualselect;
name1="left4a";
name2="right4a";
options1=a.options1;
topbottom=1;
sort2="text";
updown2=1;]
In addition
to up and down buttons, topbottom/topbottom1/topbottom2 provides buttons
moving item to top or bottom of list.
[nowrap [gadgets.dualselect;
name1="left5";
name2="right5";
options1=a.options1;
size=5;
autowidth1=1;
width2=150]]
[gadgets.dualselect;
name1="left5";
name2="right5";
options1=a.options1;
size=5;
autowidth1=1;
width2=150]
Set number of lines to show with size/size1/size2, allow select to set its width by its contents using autowidth/autowidth1/autowidth2, specify pixel width using width/width1/width2 (doesn't work in all browsers)
[nowrap [gadgets.dualselect;
name1="left6";
name2="right6";
options1=a.options1;
rightvalue=["Move >>"];
leftvalue=["<< Move"];
upvalue=["Up"];
downvalue=["Down"];
topvalue=["Top"];
bottomvalue=["Bottom"];
topbottom2=1]]
[gadgets.dualselect;
name1="left6";
name2="right6";
options1=a.options1;
rightvalue=["Move >>"];
leftvalue=["<< Move"];
upvalue=["Up"];
downvalue=["Down"];
topvalue=["Top"];
bottomvalue=["Bottom"];
topbottom2=1]
Use text
buttons instead of graphical arrows by specifying the value of the button.