好资源导航 » 文章资讯 » JavaScript实现两个select下拉框选项左移右移

JavaScript实现两个select下拉框选项左移右移

2024-02-28 00:26:03 173

今天没事用js写了一个用两个select下拉框之间能互相移动元素的小程序，刚刚才开始学javascript还有很多优化的地方。

Javascript代码




/**选中的元素向右移动**/
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=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=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:0pxauto;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()"/>

源码下载：js实现下拉框元素互相移动

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现两个select下拉框选项左移右移

热门推荐

随机推荐