对select 的操作,左右移动项

 

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

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

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

 

 

<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')">