點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:57:42

JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移

JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移:本文介紹了JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移的代碼，有興趣的同學(xué)可以參考一下本文今天沒事用js寫了一個(gè)用兩個(gè)select下拉框之間能互相移動(dòng)元素的小程序，剛剛才開始學(xué)javascript還有很多優(yōu)化的地方。Javascript代碼代碼如下 <

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移:本文介紹了JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移的代碼，有興趣的同學(xué)可以參考一下本文今天沒事用js寫了一個(gè)用兩個(gè)select下拉框之間能互相移動(dòng)元素的小程序，剛剛才開始學(xué)javascript還有很多優(yōu)化的地方。Javascript代碼代碼如下 <

本文介紹了JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移的代碼，有興趣的同學(xué)可以參考一下本文

今天沒事用js寫了一個(gè)用兩個(gè)select下拉框之間能互相移動(dòng)元素的小程序，剛剛才開始學(xué)javascript還有很多優(yōu)化的地方。

Javascript代碼

代碼如下

/**選中的元素向右移動(dòng)**/

functionmoveRight()

{

//得到第一個(gè)select對(duì)象

varselectElement = document.getElementById("first");

varoptionElements = selectElement.getElementsByTagName("option");

varlen = optionElements.length;

if(!(selectElement.selectedIndex==-1)) //如果沒有選擇元素，那么selectedIndex就為-1

{

//得到第二個(gè)select對(duì)象

varselectElement2 = document.getElementById("secend");

// 向右移動(dòng)

for(vari=0;i<len ;i++)

{

selectElement2.appendChild(optionElements[selectElement.selectedIndex]);

}

}else

{

alert("您還沒有選擇需要移動(dòng)的元素！");

}

//移動(dòng)所有的到右邊

functionmoveAll()

{

//得到第一個(gè)select對(duì)象

varselectElement = document.getElementById("first");

varoptionElements = selectElement.getElementsByTagName("option");

varlen = optionElements.length;

//alert(len);

//將第一個(gè)selected中的數(shù)組翻轉(zhuǎn)

varfirstOption =newArray();

for(vark=len-1;k>=0;k--)

{

firstOption.push(optionElements[k]);

}

varlens = firstOption.length;

//得到第二個(gè)select對(duì)象

varselectElement2 = document.getElementById("secend");

for(varj=lens-1;j>=0;j--)

{

selectElement2.appendChild(firstOption[j]);

}

//移動(dòng)選中的元素到左邊

functionmoveLeft()

{

//首先得到第二個(gè)select對(duì)象

varselectElement = document.getElementById("secend");

varoptionElement = selectElement.getElementsByTagName("option");

varlen = optionElement.length;

//再次得到第一個(gè)元素

if(!(selectElement.selectedIndex==-1))

{

varfirstSelectElement = document.getElementById("first");

for(i=0;i<len;i++)

{

firstSelectElement.appendChild(optionElement[selectElement.selectedIndex]);//被選中的那個(gè)元素的索引

}

}else

{

alert("您還沒有選中要移動(dòng)的項(xiàng)目!");

}

//全部向左移

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"/>

<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="現(xiàn)代">現(xiàn)代</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>

相關(guān)推薦：

JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移的示例代碼分享

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：移動(dòng) 實(shí)現(xiàn) js

熱門焦點(diǎn)

JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移

JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移

JavaScript實(shí)現(xiàn)兩個(gè)select下拉框選項(xiàng)左移右移

最新推薦

猜你喜歡

熱門推薦