<html>
<head>
<script language="javascript">
function moveOption(oFromList, oToList, bAll)
{
var nFromLen = oFromList.options.length;
var nToLen = oToList.options.length;
var i = 0;
while (nFromLen > 0)
{
if (oFromList.options[i].selected || bAll)
{
oToList[nToLen++] = new Option(oFromList.options[i].text, oFromList.options[i].value);
oFromList.options[i] = null;
}
else
i++;
nFromLen--;
}
sortOption(oToList);
}
function compare(a,b)
{
if (a.text < b.text)
return -1;
else if (a.text > b.text)
return 1;
return 0;
}
function sortOption(oList)
{
if (oList.options.length > 1)
{
var optionList = new Array();
for (var i=0; i < oList.options.length; i++)
optionList.push(oList.options[i]);
optionList.sort(compare);
oList.length = 0;
for (var i=0; i < optionList.length; i++)
oList.options[i] = optionList[i];
}
}
</script></head><body><form name="form1"><table align=center>
<tr>
<td width="77"> <div align="center">
<select name="leftlist" multiple size="4">
<option value="1">fason1</option>
<option value="2">fason2</option>
<option value="3">fason3</option>
<option value="4">fason4</option>
</select>
</div></td>
<td width="63"> <div align="center">
<input type="button" value=" << " onclick="javascript:moveOption(rightlist, leftlist,true)">
<br/>
<input type="button" value=" < " onclick="javascript:moveOption(rightlist, leftlist,false)">
<br/>
<input type="button" value=" > " onclick="javascript:moveOption(leftlist, rightlist,false)">
<br/>
<input type="button" value=" >> " onclick="javascript:moveOption(leftlist, rightlist,true)">
</div></td>
<td width="46"> <div align="center">
<select name="rightlist" multiple size="4">
</select>
</div></td>
</tr></table>
<p align="right">
</body>
</html>
<head>
<script language="javascript">
function moveOption(oFromList, oToList, bAll)
{
var nFromLen = oFromList.options.length;
var nToLen = oToList.options.length;
var i = 0;
while (nFromLen > 0)
{
if (oFromList.options[i].selected || bAll)
{
oToList[nToLen++] = new Option(oFromList.options[i].text, oFromList.options[i].value);
oFromList.options[i] = null;
}
else
i++;
nFromLen--;
}
sortOption(oToList);
}
function compare(a,b)
{
if (a.text < b.text)
return -1;
else if (a.text > b.text)
return 1;
return 0;
}
function sortOption(oList)
{
if (oList.options.length > 1)
{
var optionList = new Array();
for (var i=0; i < oList.options.length; i++)
optionList.push(oList.options[i]);
optionList.sort(compare);
oList.length = 0;
for (var i=0; i < optionList.length; i++)
oList.options[i] = optionList[i];
}
}
</script></head><body><form name="form1"><table align=center>
<tr>
<td width="77"> <div align="center">
<select name="leftlist" multiple size="4">
<option value="1">fason1</option>
<option value="2">fason2</option>
<option value="3">fason3</option>
<option value="4">fason4</option>
</select>
</div></td>
<td width="63"> <div align="center">
<input type="button" value=" << " onclick="javascript:moveOption(rightlist, leftlist,true)">
<br/>
<input type="button" value=" < " onclick="javascript:moveOption(rightlist, leftlist,false)">
<br/>
<input type="button" value=" > " onclick="javascript:moveOption(leftlist, rightlist,false)">
<br/>
<input type="button" value=" >> " onclick="javascript:moveOption(leftlist, rightlist,true)">
</div></td>
<td width="46"> <div align="center">
<select name="rightlist" multiple size="4">
</select>
</div></td>
</tr></table>
<p align="right">
</body>
</html>
* 移动select的部分内容,必须存在value,此函数以value为标准进行移动
*
* oSourceSel: 源列表框对象
* oTargetSel: 目的列表框对象
*/
function moveSelected(oSourceSel,oTargetSel)
{
//建立存储value和text的缓存数组
var arrSelValue = new Array();
var arrSelText = new Array();
//此数组存贮选中的options,以value来对应
var arrValueTextRelation = new Array();
var index = 0;//用来辅助建立缓存数组
//存储源列表框中所有的数据到缓存中,并建立value和选中option的对应关系
for(var i=0; i<oSourceSel.options.length; i++)
{
if(oSourceSel.options[i].selected)
{
//存储
arrSelValue[index] = oSourceSel.options[i].value;
arrSelText[index] = oSourceSel.options[i].text;
//建立value和选中option的对应关系
arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
index ++;
}
}
//增加缓存的数据到目的列表框中,并删除源列表框中的对应项
for(var i=0; i<arrSelText.length; i++)
{
//增加
var oOption = document.createElement("option");
oOption.text = arrSelText[i];
oOption.value = arrSelValue[i];
oTargetSel.add(oOption);
//删除源列表框中的对应项
oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
}
}
<script language="JavaScript">
<!--
/*move(s1,s2,flag):s1是源列表框,s2是目的列表框,flag是是否全部移动*/
function move(s1,s2,flag){
var tem=new Array();
var sa=document.frm.elements[s1];
var sb=document.frm.elements[s2];
var s=sa.selectedIndex>-1?1:0
with(sa)
for(i=length-1;i>=0;i--)
if(options[i].selected||flag){tem[tem.length]=options[i];options[i]=null}
if(s||flag){
for(i=0;i<sb.length;i++)tem[tem.length]=sb.options[i]
with(sb){
length=0;
tem.sort(sortArr)
for(i=0;i<tem.length;i++)options[length]=new Option(tem[i].text,tem[i].value)
}
}
}/*move_self(s,flag):s是列表框name,flag(1,-1),是上移或下移*/
function move_self(s,flag){
var sa=document.frm.elements[s]
var tem;
with(sa){
if(flag==1){
if(selectedIndex>0)
for(i=0;i<length;i++)
if(options[i].selected){
tem_text=options[i].text;tem_value=options[i].value
options[i].text=options[i-1].text;
options[i].value=options[i-1].value;
options[i-1].text=tem_text;options[i-1].value=tem_value
options[i-1].selected=true;options[i].selected=false
}
}
else
for(i=length-1;i>=0;i--)
if(options[i].selected){
if(i==length-1)break;
tem_text=options[i].text;tem_value=options[i].value
options[i].text=options[i+1].text;
options[i].value=options[i+1].value;
options[i+1].text=tem_text;options[i+1].value=tem_value
options[i+1].selected=true;options[i].selected=false
}
}
}/*显示列表框选中的值,s是列表框的name*/
function show(s){
var str=""
with(document.frm.elements[s])
for(i=0;i<length;i++)
if(options[i].selected)str+="\n第"+(i+1)+"个option:\ntext:"+options[i].text+" value:"+options[i].value
alert(str)
}function sortArr(a,b){
if(a.text>b.text)return 1
if(a.text<b.text)return -1
return 0
}
//-->
</script>
<form name="frm">
<select name="a" size="5" style="width:100" multiple>
<option value="a1">1</option>
<option value="a2">2</option>
<option value="a3">3</option>
<option value="a4">4</option>
</select>
<input type=button value=">>" onclick="move('a','b',1)">
<input type=button value=" > " onclick="move('a','b')">
<input type=button value=" < " onclick="move('b','a')">
<input type=button value="<<" onclick="move('b','a',1)">
<select name="b" size="5" style="width:100" multiple>
<option value="b1">a</option>
<option value="b2">b</option>
<option value="b3">c</option>
<option value="b4">d</option>
<option value="b5">e</option>
</select><br/>
<input type=button value="up" onclick="move_self('a',1)">
<input type=button value="down" onclick="move_self('a',-1)">
<input type=button value="up" onclick="move_self('b',1)">
<input type=button value="down" onclick="move_self('b',-1)">
<input type=button value="get a's value" onclick="show('a')">
<input type=button value="get b's value" onclick="show('b')">
</form>
</body>
<!--
function funright(){
var strobjselect1=document.myform.myselect1;
var strobjselect2=document.myform.myselect2;
//var lenselect2=strobjselect2.options.length;
strobjselect2.appendChild(strobjselect1[strobjselect1.selectedIndex]);
//strobjselect1.remove(strobjselect1.options[strobjselect1.selectedIndex]);
}
function funleft(objform){
var strobjselect1=objform.myselect1;
var strobjselect2=objform.myselect2;
//var lenselect1=objform.options.length;
strobjselect1.appendChild(strobjselect2.options[strobjselect2.selectedIndex]);
//strobjselect2.remove(strobjselect2.options[strobjselect2.selectedIndex]);
}
-->
</script>