JavaScript實作兩個select下拉方塊選項左移右移的範例程式碼分享
- 黄舟原創
- 2017-03-21 14:49:072079瀏覽
這篇文章主要介紹了JavaScript實作兩個select下拉框選項左移右移功能，js實作下拉框元素互相移動，具有一定的參考價值，有興趣的小夥伴們可以參考一下
今天沒事用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>
<p class="select_move">
<p 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>
</p>
<p 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()"/>
</p>
<p class="select_move_3">
<select size="10" id="secend" multiple="multiple">
</select>
</p>
</p>
</body>
</html>以上是JavaScript實作兩個select下拉方塊選項左移右移的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn