1,两个Select控件中的option互相移动,同一个Select中的option移上或移下 <form name=frm> <table> <tr > <td> <select name=SrcSelect size=6 class="ecv_autoSizeDropDown" style="height:160px;" multiple οndblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)"> <option value="1">test1</option> </select> </td> <td width="30px"> <input align="left" type=button value=">>" οnclick="moveLeftOrRightAll(document.frm.SrcSelect,document.frm.ObjSelect)" ><br><br> <input align="left" type=button value=">" οnclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)" ><br><br> <input align="left" type=button value="<" οnclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)" ><br><br> <input align="left" type=button value="<<" οnclick="moveLeftOrRightAll(document.frm.ObjSelect,document.frm.SrcSelect)" > </td> <td> <select name=ObjSelect size=6 class="ecv_autoSizeDropDown" style="height:160px;" multiple οndblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)"> <option value="11">test11</option> </select> </td> <td width="30px"> <input type=button value="AA" οnclick="moveToTop(document.frm.ObjSelect)" > <br><br> <input type=button value="A" οnclick="moveUp(document.frm.ObjSelect)" > <br><br> <input type=button value="V" οnclick="moveDown(document.frm.ObjSelect)" ><br><br> <input type=button value="VV" οnclick="moveToBottom(document.frm.ObjSelect)" > </td> </tr> </table> </form> <mce:script language=javascript><!-- function moveLeftOrRight(fromObj,toObj) { var fromObjOptions=fromObj.options; for(var i=0;i<fromObjOptions.length;i++){ if(fromObjOptions[i].selected){ toObj.appendChild(fromObjOptions[i]); i--; } } resetAutoWidth(fromObj); resetAutoWidth(toObj); } function moveLeftOrRightAll(fromObj,toObj) { var fromObjOptions=fromObj.options; if(fromObjOptions.length>1000) { //if(!confirm("Are you sure to move options?")) return false; } for(var i=0;i<fromObjOptions.length;i++){ fromObjOptions[0].selected=true; toObj.appendChild(fromObjOptions[i]); i--; } resetAutoWidth(fromObj); resetAutoWidth(toObj); } function moveUp(selectObj) { var theObjOptions=selectObj.options; for(var i=1;i<theObjOptions.length;i++) { if( theObjOptions[i].selected && !theObjOptions[i-1].selected ) { swapOptionProperties(theObjOptions[i],theObjOptions[i-1]); } } } function moveDown(selectObj) { var theObjOptions=selectObj.options; for(var i=theObjOptions.length-2;i>-1;i--) { if( theObjOptions[i].selected && !theObjOptions[i+1].selected ) { swapOptionProperties(theObjOptions[i],theObjOptions[i+1]); } } } function moveToTop(selectObj){ var theObjOptions=selectObj.options; var oOption=null; for(var i=0;i<theObjOptions.length;i++) { if( theObjOptions[i].selected && oOption) { selectObj.insertBefore(theObjOptions[i],oOption); } else if(!oOption && !theObjOptions[i].selected) { oOption=theObjOptions[i]; } } } function moveToBottom(selectObj){ var theObjOptions=selectObj.options; var oOption=null; for(var i=theObjOptions.length-1;i>-1;i--) { if( theObjOptions[i].selected ) { if(oOption) { oOption=selectObj.insertBefore(theObjOptions[i],oOption); } else oOption=selectObj.appendChild(theObjOptions[i]); } } } function swapOptionProperties(option1,option2){ //option1.swapNode(option2); var tempStr=option1.value; option1.value=option2.value; option2.value=tempStr; tempStr=option1.text; option1.text=option2.text; option2.text=tempStr; tempStr=option1.selected; option1.selected=option2.selected; option2.selected=tempStr; } function resetAutoWidth(obj){ var tempWidth=obj.style.getExpression("width"); if(tempWidth!=null) { obj.style.width="auto"; obj.style.setExpression("width",tempWidth); obj.style.width=null; } } // --></mce:script> 2, 可输入的Select控件 <div style="position:relative;" mce_style="position:relative;"> <span style="margin-left:100px;width:18px;overflow:hidden;"> <select style="width:118px;margin-left:-100px" οnchange="this.parentNode.nextSibling.value=this.value"> <option value="www.souzz.net"> souzz </option> <option value="www.eWebSoft.com"> eWebSoft </option> <option value="WEB开发者"> WEB开发者 </option> </select></span><input name="box" style="width:101px;position:absolute;left:0px;"> </div>