js实现左右2个下拉选择框，左右上下移动功能

最新推荐文章于 2023-03-27 21:16:36 发布

风心

最新推荐文章于 2023-03-27 21:16:36 发布

阅读量525

点赞数

分类专栏： JS 文章标签： J# HTML

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<form name=frm1>
<table width="100%" border="0" align="center" cellpadding="1" cellspacing="1" class="docBoxNoPanel">
<tr >
<td nowrap="nowrap"> </td>
<td width="50%" align="center">
<select name="SrcSelect" size=6 style="height:160px;width:98%" multiple οndblclick="moveLeftOrRight(document.frm1.SrcSelect,document.frm1.ObjSelect)">
<option value="001">第一项</option>
<option value="002">第二项</option>
<option value="003">第三项</option>
<option value="004">第四项</option>
<option value="005">第五项</option>
<option value="006">第六项</option>
<option value="007">第七项</option>
<option value="008">第八项</option>
<option value="009">第九项</option>
<option value="010">第十项</option>
</select>

</td>
<td width="30px" align="center">
<input align="left" type=button value=">>" title="全部右移" οnclick="moveLeftOrRightAll(document.frm1.SrcSelect,document.frm1.ObjSelect)" ><br>
<input align="left" type=button value=">" title="右移" οnclick="moveLeftOrRight(document.frm1.SrcSelect,document.frm1.ObjSelect)" ><br>
<input type=button value="↑" title="上移" οnclick="moveUp(document.frm1.ObjSelect)" ><br>
<input type=button value="↓" title="下移" οnclick="moveDown(document.frm1.ObjSelect)" ><br>
<input align="left" type=button value="<" title="左移" οnclick="moveLeftOrRight(document.frm1.ObjSelect,document.frm1.SrcSelect)" ><br>
<input align="left" type=button value="<<" title="全部左移" οnclick="moveLeftOrRightAll(document.frm1.ObjSelect,document.frm1.SrcSelect)" >
</td>
<td width="50%" align="center">
<select name="ObjSelect" size=6 style="height:160px;width:98%" multiple οndblclick="moveLeftOrRight(document.frm1.ObjSelect,document.frm1.SrcSelect)">
</select>
</td>
</tr>
<tr>
<td colspan="4"><button name="selectCheck" οnclick="checkSelectedOption();">选中查看</button></td>
</tr>
</table>
</form>
</BODY>
</HTML>

<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--;
}
}
}
//左边全部右移动，或右边全部左移
function moveLeftOrRightAll(fromObj,toObj){
var fromObjOptions=fromObj.options;
for(var i=0;i<fromObjOptions.length;i++){
fromObjOptions[0].selected=true;
toObj.appendChild(fromObjOptions[i]);
i--;
}
}
//向上移动
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 selectAllOption(selectObj){
var theObjOptions=selectObj.options;
for(var i=0;i<theObjOptions.length;i++){
theObjOptions[0].selected=true;
}
}

/* private function */
function swapOptionProperties(option1,option2){
//option1.swapNode(option2);
var tempStr=option1.value;
option1.value=option2.value;
option2.value=tempStr;

var tempValSource=option1.valSource;//
option1.valSource=option2.valSource;//
option2.valSource=tempValSource;//

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;
}
}

function checkSelectedOption(){
var ObjSelect = document.frm1.ObjSelect;
var itemField="";
var itemName="";
if(ObjSelect&&ObjSelect.options&&ObjSelect.options.length>0){
var len = ObjSelect.options.length;
for(var j=0; j<len; j++){
itemField += ObjSelect.options[j].value + "|";
itemName += ObjSelect.options[j].text + "|";
}
}
alert(itemField);
alert(itemName);
return;
}

</script>