对select 的操作,左右移动项

 

select，左右移动选中项（支持多选）

实现：通过循环把当前选中的添加到一个数组中，然后循环数组，在往目标select添加

Code
function move(obj)
{
if(obj=='')
    {
return;
    }
var oList1=document.getElementById("oListbox1");
var oList2=document.getElementById("oListbox2");
var arrOptions=new Array;
if(obj=="add")
    {
if(oList1.options.length<=0)
        {
            alert("左边已经没有了");
return;
        }
if(oList1.selectedIndex<0)
        {
            alert("请选择要删除的项");
return;
        }
for(var i=0;i<oList1.options.length;i++)
        {
if(oList1.options[i].selected)
            {
//将当前选中的添加到数组中
                arrOptions.push(oList1.options[i]);
            }
        }
for(var i=0;i<arrOptions.length;i++)
        {
//循环把数组中的值添加的oList2
            oList2.appendChild(arrOptions[i]);
        }
    }
else if(obj=="delete")
    {
if(oList2.options.length<=0)
        {
            alert("右边已经没有了");
return;
        }
if(oList2.selectedIndex<0)
        {
            alert("请选择要删除的项");
return;
        }
for(var i=0;i<oList2.options.length;i++)
        {
if(oList2.options[i].selected)
            {
                arrOptions.push(oList2.options[i]);    
            }
        }
for(var i=0;i<arrOptions.length;i++)
        {
            oList1.appendChild(arrOptions[i]);
        }
    }
}

 

 

Code
<select id="oListbox1" multiple="multiple" style="width:300px;height:200px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select id="oListbox2" multiple="multiple" style="width:300px;height:200px;">
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select><br>
<input type="button" value="添加" onclick="move('add')">
<input type="button" value="删除" onclick="move('delete')">

转载于:https://www.cnblogs.com/huaibaobao/archive/2008/11/19/1337120.html