js select多选列表传值代码

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>js select</title> <form name="form1" method="post" action=""> <table border="0" align="center" width="75%" cellspacing="0" cellpadding="0"><tr> <td> <table border="0" align="center"><tr> <td> <select name="leftitem" style="width:200px" size="10" multiple><option value="1">item1 </option> <option value="2">item2 </option> <option value="3">item3 </option> <option value="4">item4 </option> <option value="5">item5 </option></select> </td> </tr></table> </td> <td> <table border="0" align="center"> <tr><td height="30"><input type="button" name="button1" style="width:50px" value=">" onclick="fmoveselectedoptionslefttoright(document.all.leftitem,document.all.rightitem)"></td></tr> <tr><td height="30"><input type="button" name="button2" style="width:50px" value=">>" onclick="fmovealloptionslefttoright(document.all.leftitem,document.all.rightitem)"></td></tr> <tr><td height="30"><input type="button" name="button3" style="width:50px" value="<" onclick="fmoveselectedoptionsrighttoleft(document.all.leftitem,document.all.rightitem)"></td></tr> <tr><td height="30"><input type="button" name="button4" style="width:50px" value="<<" onclick="fmovealloptionsrighttoleft(document.all.leftitem,document.all.rightitem)"></td></tr> </table> </td> <td> <table border="0" align="center"><tr> <td> <select name="rightitem" style="width:200px" size="10" multiple></select> </td> </tr></table> </td> </tr></table> <table border="0" align="center"><tr height="40"> <td><input type="button" value="保存" onclick="checkform()"></td> </tr></table> </form>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]

js核心代码

/*移除左边选中的列表项到右边*/
function fmoveselectedoptionslefttoright(oleft,oright)
{
if(!(oleft&&oright))
{
return;
}
if(!hasoptions(oleft))
{
return;
}
if(oleft.selectedindex==-1)
{
oleft.selectedindex=0;
}
for(var i=0;i<oleft.options.length;i++)
{
if(oleft.options[i].selected)
{
var ooption = document.createelement("option");
ooption.setattribute("text",oleft.options[i].text);
ooption.setattribute("value",oleft.options[i].value);
oright.add(ooption);
}
}
clearselectedoptions(oleft);
}
/*移除左边的所有列表项到右边*/
function fmovealloptionslefttoright(oleft,oright)
{
if(!(oleft&&oright))
{
return;
}
if(!hasoptions(oleft))
{
return;
}
for(var i=0;i<oleft.options.length;i++)
{
var ooption = document.createelement("option");
ooption.setattribute("text",oleft.options[i].text);
ooption.setattribute("value",oleft.options[i].value);
oright.add(ooption);
}
clearalloptions(oleft);
}
/*移除右边选中的列表项到左边*/
function fmoveselectedoptionsrighttoleft(oleft,oright)
{
if(!(oleft&&oright))
{
return;
}
if(!hasoptions(oright))
{
return;
}
if(oright.selectedindex==-1)
{
oright.selectedindex=0;
}
for(var i=0;i<oright.options.length;i++)
{
if(oright.options[i].selected)
{
var ooption = document.createelement("option");
ooption.setattribute("text",oright.options[i].text);
ooption.setattribute("value",oright.options[i].value);
oleft.add(ooption);
}
}
clearselectedoptions(oright);
}
/*移除右边的所有列表项到左边*/
function fmovealloptionsrighttoleft(oleft,oright)
{
if(!(oleft&&oright))
{
return;
}
if(!hasoptions(oright))
{
return;
}
for(var i=0;i<oright.options.length;i++)
{
var ooption = document.createelement("option");
ooption.setattribute("text",oright.options[i].text);
ooption.setattribute("value",oright.options[i].value);
oleft.add(ooption);
}
clearalloptions(oright);
}
/*清空select所有options*/
function clearalloptions(oselect)
{
if(oselect)
{
var ops=oselect.options;
while(ops.length>0)
{
oselect.remove(ops.length-1);
}
}
}
/*清空select所有选中的options*/
function clearselectedoptions(oselect)
{
if(oselect)
{
for(var i=0;i<oselect.options.length;i++)
{
if(oselect.options[i].selected)
{
oselect.remove(i--);
}
}
}
}
/*判断select是否有options*/
function hasoptions(oselect)
{
if(oselect)
{
return oselect.options.length>0;
}
return false;
}