jak masz czas i ochote popracuj troche nadtym, to szkielet jeno, wymaga troche poprawek, szczegolnie pod IE. Kiedys mielismy tego uzyc, ale zmienilismy koncepcje i prace sie zatrzymaly.
<style media="screen" type="text/css"> .selboxa, .selboxb {
width: 150px;
float:left;
}
.selboxb{
float:right;
}
.selboxa select, .selboxb select {
width:150px;
}
.selactions {
float:left;
text-align:left;
}
.selactions input {
width: 60px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
border:1px solid #999999;
background:white;
margin-bottom:3px;
}
#bCtrl {
width: 363px;
text-align:center;
}
#bCtrl p{
border: 1px solid #CCCCCC;
background:#FCFCFC;
margin-bottom: 3px;
clear:both;
}
<script language="javascript" >
function in_array(neddle, haystack){
for (var i=0; i < haystack.length; i++) {
if (haystack[i] == neddle){
return true;
}
}
return false;
}
var LEFT = "boxa";
var RIGHT = "boxb";
function select_txtCompare(a, b){
if( a.text > b.text ) return 1;
else if (a.text < b.text) return -1;
else if (a.text == b.text) {
if (a.value > b.value) return 1;
else if(a.value < b.value) return -1;
}
return 0;
}
function oneright(){
var a = document.getElementById(LEFT);
var b = document.getElementById(RIGHT);
var al = a.length;
var sv = new Array( );
var st = new Array( );
/* collect selected from a box */
for (var i = 0; i < al; i++) {
if (a.options[i].selected) {
sv[sv.length] = a.options[i].value;
st[st.length] = a.options[i].text;
//a.options[i].selected = false;
}
}
/* colect b box */
var bl = b.length;
var bv = new Array( );
var bt = new Array( );
var sl = sv.length;
var opts = new Array( );
for ( i = 0; i <bl; i++){
bv[bv.length] = b.options[i].value;
bt[bt.length] = b.options[i].text;
opts[opts.length] = new Option (b.options[i].text, b.options[i].value);
}
for (i=0; i<sl; i++){
if ( ! in_array(sv[i], bv) ) {
opts[opts.length] = new Option( st[i], sv[i] );
}
}
b.options.length = 0;
opts.sort(select_txtCompare);
for (i=0; i<opts.length; i++) {
b.options[i] = opts[i];
//b.options[i].selected = true;
}
}
function oneleft(){
/* colect b box */
var b = document.getElementById(RIGHT);
var bl = b.length;
var bv = new Array( );
var bt = new Array( );
var opts = new Array( );
for ( var i=0; i<b.length; i++ ){
if (!b.options[i].selected)
opts[opts.length] = new Option (b.options[i].text, b.options[i].value);
}
b.options.length = 0;
opts.sort(select_txtCompare);
for (i=0; i<opts.length; i++) {
b.options[i] = opts[i];
}
}
function b_select(){
var b = document.getElementById(RIGHT);
var bl = b.length;
for (var i = 0; i < bl; i++){
b.options[i].selected = true;
}
return true;
}
<form name="selects" enctype="application/x-www-form-urlencoded" method="post" onsubmit="return b_select()"> <p> this is control,
</p> <select name="fa[]" size="10" multiple="multiple" id="boxa" onclick="oneright()" > <br /><input type="button" name="one_right" value=">" onclick="oneright()"> <br /><input type="button" name="all_right" value=">>"> <br /><input type="button" name="one_left" value="<" onclick="oneleft()"> <br /><input type="button" name="all_left" value="<<">
<select name="fb[]" size="10" multiple="multiple" id="boxb" onclick="oneleft()" onfocus="this.blur()" > <p>send this selects
</p> <input type="submit" name="go" value="send this" />