JavaScript实现两个select下拉框选项左移右移
程序员文章站
2023-12-01 13:15:34
今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。
javascript代码...
今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。
javascript代码
<script type="text/javascript">
/**选中的元素向右移动**/
function moveright()
{
//得到第一个select对象
var selectelement = document.getelementbyid("first");
var optionelements = selectelement.getelementsbytagname("option");
var len = optionelements.length;
if(!(selectelement.selectedindex==-1)) //如果没有选择元素，那么selectedindex就为-1
{
//得到第二个select对象
var selectelement2 = document.getelementbyid("secend");
// 向右移动
for(var i=0;i<len ;i++)
{
selectelement2.appendchild(optionelements[selectelement.selectedindex]);
}
} else
{
alert("您还没有选择需要移动的元素！");
}
}
//移动所有的到右边
function moveall()
{
//得到第一个select对象
var selectelement = document.getelementbyid("first");
var optionelements = selectelement.getelementsbytagname("option");
var len = optionelements.length;
//alert(len);
//将第一个selected中的数组翻转
var firstoption = new array();
for(var k=len-1;k>=0;k--)
{
firstoption.push(optionelements[k]);
}
var lens = firstoption.length;
//得到第二个select对象
var selectelement2 = document.getelementbyid("secend");
for(var j=lens-1;j>=0;j--)
{
selectelement2.appendchild(firstoption[j]);
}
}
//移动选中的元素到左边
function moveleft()
{
//首先得到第二个select对象
var selectelement = document.getelementbyid("secend");
var optionelement = selectelement.getelementsbytagname("option");
var len = optionelement.length;
//再次得到第一个元素
if(!(selectelement.selectedindex==-1))
{
var firstselectelement = document.getelementbyid("first");
for(i=0;i<len;i++)
{
firstselectelement.appendchild(optionelement[selectelement.selectedindex]);//被选中的那个元素的索引
}
}else
{
alert("您还没有选中要移动的项目!");
}
}
//全部向左移
function moveallleft()
{
var selectelement = document.getelementbyid("secend");
var optionelements = document.getelementsbytagname("option");
var len = optionelements.length;
var optionels = new array();
for(var i=len-1;i>=0;i--)
{
optionels.push(optionelements[i]);
}
var lens = optionels.length;
var firstselectelement = document.getelementbyid("first");
for(var j=lens-1;j>=0;j--)
{
firstselectelement.appendchild(optionels[j]);
}
}
</script>
上面是javascript代码，下面是html加css代码。
html代码
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.select_move { margin:0px auto; width:206px; height:140px; margin-top:300px;}
.select_move_1 { float:left;}
.select_move_2 { float:left;}
.select_move_3 { float:left;}
</style>
</head>
<body>
<div class="select_move">
<div class="select_move_1">
<select name="first" size="10" id="first" multiple="multiple">
<option value="宝马">宝马</option>
<option value="丰田">丰田</option>
<option value="奥迪">奥迪</option>
<option value="凯迪拉克">凯迪拉克</option>
<option value="现代">现代</option>
<option value="奔驰">奔驰</option>
<option value="法拉利">法拉利</option>
</select>
</div>
<div class="select_move_2">
<input type="button" value="------>" onclick="moveright()"/><br />
<input type="button" value="===>" onclick="moveall()" /><br />
<input type="button" value="<------" onclick="moveleft()"/><br />
<input type="button" value="<===" onclick="moveallleft()"/>
</div>
<div class="select_move_3">
<select size="10" id="secend" multiple="multiple">
</select>
</div>
</div>
</body>
</html>
源码下载：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。