溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
Javascript代碼
<script type="text/javascript">
/**選中的元素向右移動(dòng)**/
function moveRight()
{
//得到第一個(gè)select對(duì)象
var selectElement = document.getElementById("first");
var optionElements = selectElement.getElementsByTagName("option");
var len = optionElements.length;
if(!(selectElement.selectedIndex==-1)) //如果沒(méi)有選擇元素，那么selectedIndex就為-1
{
//得到第二個(gè)select對(duì)象
var selectElement2 = document.getElementById("secend");
// 向右移動(dòng)
for(var i=0;i<len ;i++)
{
selectElement2.appendChild(optionElements[selectElement.selectedIndex]);
}
} else
{
alert("您還沒(méi)有選擇需要移動(dòng)的元素！");
}
}
//移動(dòng)所有的到右邊
function moveAll()
{
//得到第一個(gè)select對(duì)象
var selectElement = document.getElementById("first");
var optionElements = selectElement.getElementsByTagName("option");
var len = optionElements.length;
//alert(len);
//將第一個(gè)selected中的數(shù)組翻轉(zhuǎn)
var firstOption = new Array();
for(var k=len-1;k>=0;k--)
{
firstOption.push(optionElements[k]);
}
var lens = firstOption.length;
//得到第二個(gè)select對(duì)象
var selectElement2 = document.getElementById("secend");
for(var j=lens-1;j>=0;j--)
{
selectElement2.appendChild(firstOption[j]);
}
}
//移動(dòng)選中的元素到左邊
function moveLeft()
{
//首先得到第二個(gè)select對(duì)象
var selectElement = document.getElementById("secend");
var optionElement = selectElement.getElementsByTagName("option");
var len = optionElement.length;
//再次得到第一個(gè)元素
if(!(selectElement.selectedIndex==-1))
{
var firstSelectElement = document.getElementById("first");
for(i=0;i<len;i++)
{
firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被選中的那個(gè)元素的索引
}
}else
{
alert("您還沒(méi)有選中要移動(dòng)的項(xiàng)目!");
}
}
//全部向左移
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>無(wú)標(biāo)題文檔</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="現(xiàn)代">現(xiàn)代</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>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼