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