點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

JavaScript實現兩個select下拉框選項左移右移

來源：懂視網責編：小采時間：2020-11-27 19:57:42

JavaScript實現兩個select下拉框選項左移右移

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

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript實現兩個select下拉框選項左移右移:本文介紹了JavaScript實現兩個select下拉框選項左移右移的代碼，有興趣的同學可以參考一下本文今天沒事用js寫了一個用兩個select下拉框之間能互相移動元素的小程序，剛剛才開始學javascript還有很多優化的地方。Javascript代碼代碼如下 <

本文介紹了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下拉框選項左移右移

推薦度：

點擊下載本文 文檔為doc格式

標簽：移動實現 js

熱門焦點

JavaScript實現兩個select下拉框選項左移右移

JavaScript實現兩個select下拉框選項左移右移

JavaScript實現兩個select下拉框選項左移右移

最新推薦

猜你喜歡

熱門推薦