<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table align="center">
<tr>
<td>
<select id="left" multiple="true" style="width: 100px" size="12">
<option>帅</option>
<option>的</option>
<option>人</option>
<option>在</option>
<option>这</option>
<option>里</option>
<option>啊</option>
<option>看</option>
<option>过</option>
<option>来</option>
</select>
</td>
<td>
<input type="button" value=">" "toRight_Single()"/><br />
<input type="button" value=">>" "toRight_Multiple()"/><br />
<input type="button" value=">>>" "toRight3_All()"/><br /><br />
<input type="button" value="<" "toLeft_Single()"/><br />
<input type="button" value="<<" "toLeft_Multiple()"/><br />
<input type="button" value="<<<" "toLeft_All()"/><br />
</td>
<td>
<select id="right" multiple="true" style="width: 100px" size="12">
</select>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
function toRight_Single(){
//得到第一个select对象
var left = document.getElementById("left");
//获取所有的选项
var options= left.getElementsByTagName("option");
//获取选项的个数
var len = options.length;
if(!(left.selectedIndex==-1)) //如果没有选择元素,那么selectedIndex就为-1
{
//得到第二个select对象
var right = document.getElementById("right");
right.appendChild(options[left.selectedIndex]);
} else
{
alert("您还没有选择需要移动的元素!");
}
}
function toRight_Multiple(){
//得到第一个select对象
var left = document.getElementById("left");
var options= left.getElementsByTagName("option");
var len = options.length;
if(!(left.selectedIndex==-1)) //如果没有选择元素,那么selectedIndex就为-1
{
//得到第二个select对象
var right = document.getElementById("right");
// 向右移动
for(var i=0;i<len ;i++)
{
right.appendChild(options[left.selectedIndex]);
}
} else
{
alert("您还没有选择需要移动的元素!");
}
}
//移动所有的到右边
function toRight3_All() {
//得到第一个select对象
var left = document.getElementById("left");
var options = left.getElementsByTagName("option");
var len = options.length;
//alert(len);
//将第一个selected中的数组翻转
var firstOption = new Array();
for(var k=len-1;k>=0;k--)
{
firstOption.push(options[k]);
}
var lens = firstOption.length;
//得到第二个select对象
var right = document.getElementById("right");
for(var j=lens-1;j>=0;j--)
{
right.appendChild(firstOption[j]);
}
}
function toLeft_Single(){
//得到第一个select对象
var left = document.getElementById("right");
var options= left.getElementsByTagName("option");
var len = options.length;
if(!(left.selectedIndex==-1)) //如果没有选择元素,那么selectedIndex就为-1
{
//得到第二个select对象
var right = document.getElementById("left");
right.appendChild(options[left.selectedIndex]);
} else
{
alert("您还没有选择需要移动的元素!");
}
}
//移动选中的元素到左边
function toLeft_Multiple()
{
//首先得到第二个select对象
var right = document.getElementById("right");
var options = right.getElementsByTagName("option");
var len = options.length;
//再次得到第一个元素
if(!(right.selectedIndex==-1))
{
var left = document.getElementById("left");
for(i=0;i<len;i++)
{
left.appendChild(options[right.selectedIndex]);//被选中的那个元素的索引
}
}else
{
alert("您还没有选中要移动的项目!");
}
}
//全部向左移
function toLeft_All()
{
var right = document.getElementById("right");
var options = document.getElementsByTagName("option");
var len = options.length;
var optionEls = new Array();
for(var i=len-1;i>=0;i--)
{
optionEls.push(options[i]);
}
var lens = optionEls.length;
var left = document.getElementById("left");
for(var j=lens-1;j>=0;j--)
{
left.appendChild(optionEls[j]);
}
}
</script>
</html>
将下拉列表select中的选项框option中元素移动到右边下拉列表
最新推荐文章于 2023-05-16 19:42:09 发布