本文介绍了javascript实现两个select下拉框选项左移右移的代码，有兴趣的同学可以参考一下本文
今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。
Javascript代码
代码如下
立即学习“Java免费学习笔记（深入）”；
/**选中的元素向右移动**/
functionmoveRight()
{
//得到第一个select对象
varselectElement = document.getElementById(“first”);
varoptionElements = selectElement.getElementsByTagName(“option”);
varlen = optionElements.length;
if(!(selectElement.selectedIndex==-1)) //如果没有选择元素，那么selectedIndex就为-1
{
//得到第二个select对象
varselectElement2 = document.getElementById(“secend”);
// 向右移动
for(vari=0;i
{
selectElement2.appendChild(optionElements[selectElement.selectedIndex]);
}
}else
{
alert(“您还没有选择需要移动的元素！”);
}
}
//移动所有的到右边
functionmoveAll()
{
//得到第一个select对象
varselectElement = document.getElementById(“first”);
varoptionElements = selectElement.getElementsByTagName(“option”);
varlen = optionElements.length;
//alert(len);
//将第一个selected中的数组翻转
varfirstOption =newArray();
for(vark=len-1;k>=0;k–)
{
firstOption.push(optionElements[k]);
}
varlens = firstOption.length;
//得到第二个select对象
varselectElement2 = document.getElementById(“secend”);
for(varj=lens-1;j>=0;j–)
{
selectElement2.appendChild(firstOption[j]);
}
}
//移动选中的元素到左边
functionmoveLeft()
{
//首先得到第二个select对象
varselectElement = document.getElementById(“secend”);
varoptionElement = selectElement.getElementsByTagName(“option”);
varlen = optionElement.length;
//再次得到第一个元素
if(!(selectElement.selectedIndex==-1))
{
varfirstSelectElement = document.getElementById(“first”);
for(i=0;i
{
firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被选中的那个元素的索引
}
}else
{
alert(“您还没有选中要移动的项目!”);
}
}
//全部向左移
functionmoveAllLeft()
{
varselectElement = document.getElementById(“secend”);
varoptionElements = document.getElementsByTagName(“option”);
varlen = optionElements.length;
varoptionEls =newArray();
for(vari=len-1;i>=0;i–)
{
optionEls.push(optionElements[i]);
}
varlens = optionEls.length;
varfirstSelectElement = document.getElementById(“first”);
for(varj=lens-1;j>=0;j–)
{
firstSelectElement.appendChild(optionEls[j]);
}
}
上面是javascript代码，下面是html加css代码。
Html代码
代码如下
.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;}
宝马
丰田
奥迪
凯迪拉克
现代
奔驰
法拉利
” onclick=”moveRight()”/>
” onclick=”moveAll()” />
相关推荐：
JavaScript实现两个select下拉框选项左移右移的示例代码分享
以上就是JavaScript实现两个select下拉框选项左移右移的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2777713.html
