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

程序员文章站 2022-06-02 10:08:27

...

本文介绍了JavaScript实现两个select下拉框选项左移右移的代码，有兴趣的同学可以参考一下本文

今天没事用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<len ;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<len;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]);

}

</script>

上面是javascript代码，下面是html加css代码。

Html代码

代码如下

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<styletype="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>

<pclass="select_move">

<pclass="select_move_1">

<selectname="first"size="10"id="first"multiple="multiple">

<optionvalue="宝马">宝马</option>

<optionvalue="丰田">丰田</option>

<optionvalue="奥迪">奥迪</option>

<optionvalue="凯迪拉克">凯迪拉克</option>

<optionvalue="现代">现代</option>

<optionvalue="奔驰">奔驰</option>

<optionvalue="法拉利">法拉利</option>

</select>

</p>

<pclass="select_move_2">

<inputtype="button"value="------>" onclick="moveRight()"/><br/>

<inputtype="button"value="===>" onclick="moveAll()" /><br/>

<inputtype="button"value="<------"onclick="moveLeft()"/><br/>

<inputtype="button"value="<==="onclick="moveAllLeft()"/>

</p>

<pclass="select_move_3">

<selectsize="10"id="secend"multiple="multiple">

</select>

</p>

</body>

</html>

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

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

JavaScript实现两个select下拉框选项左移右移的示例代码分享

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

JavaScript实现两个select下拉框选项左移右移的示例代码分享