select控件

1,两个Select控件中的option互相移动,同一个Select中的option移上或移下

 <form name=frm><table><tr > <td> <select name=SrcSelect size=6 class="ecv_autoSizeDropDown" style="height:160px;" multiple ondblclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)"> <option value="1">test1</option> </select> </td> <td width="30px"> <input align="left" type=button value=">>" onclick="moveLeftOrRightAll(document.frm.SrcSelect,document.frm.ObjSelect)" ><br><br> <input align="left" type=button value=">" onclick="moveLeftOrRight(document.frm.SrcSelect,document.frm.ObjSelect)" ><br><br> <input align="left" type=button value="<" onclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)" ><br><br> <input align="left" type=button value="<<" onclick="moveLeftOrRightAll(document.frm.ObjSelect,document.frm.SrcSelect)" > </td> <td> <select name=ObjSelect size=6 class="ecv_autoSizeDropDown" style="height:160px;" multiple ondblclick="moveLeftOrRight(document.frm.ObjSelect,document.frm.SrcSelect)"> <option value="11">test11</option> </select> </td> <td width="30px"> <input type=button value="AA" onclick="moveToTop(document.frm.ObjSelect)" > <br><br> <input type=button value="A" onclick="moveUp(document.frm.ObjSelect)" > <br><br> <input type=button value="V" onclick="moveDown(document.frm.ObjSelect)" ><br><br> <input type=button value="VV" onclick="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" onchange="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>