下拉列表左右選擇案例
阿新 • • 發佈：2017-07-15
獲取 是否 cti 全部 options itl 標簽 cli pan
單個添加的操作
1、得到select裏面的option
-getElementsByTagName（）返回是數組
-遍歷數組，得到每一個option
2、判斷option是否被選中
-屬性：selected 如果選中 selected=true 沒有選中就是false
3、如果選中，把選中的添加
-得到select
-添加到選擇的部分 appendChild方法
全部選中添加的操作
1、獲取第一個select下面的option對象
2、返回數組，遍歷數組
3、得到每一個option對象
4、得到select
5、添加到select2下面 appendChild方法、
代碼
<html>
<head>
<title>Html示例</title>
<style type="text/css">
</style>
</head>
<body>
<div style="float:left"> //把第一個下拉列表弄在左邊 <style> 標簽用於為 HTML 文檔定義樣式信息。
<div>
<select id="select1" multiple ="multiple" style="width:100px; height:100px"> //multiple 允許在下拉列表中進行多選
<option> AAAAAA</option>
<option> BBBBBB</option>
<option> CCCCCC</option>
<option> DDDDDD</option>
</select>
</div>
<div>
<input type="button" value="選中添加到右邊" onclick="selectright()"/> <br/>
<input type="button" value="全部添加到右邊" onclick="allright()"/>
</div>
</div>
<div id ="right" >
<div>
<select id="select2" multiple ="multiple" style="width:100px;height:100px">
<option> QQQQQQ</option>
<option> KKKKKK</option>
</select>
</div>
<div>
<input type="button" value="選中添加到左邊" onclick="selectleft()"/><br/>
<input type="button" value="全部添加到左邊" onclick="allleft()"/>
</div>
</div>
<script type ="text/javascript">
//選中添加到右邊的操作
function selectright() {
var select1 =document.getElementById("select1");
var select2=document.getElementById("select2");
var options1=select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++) {
var option1=options1[i];
if(option1.selected==true) {
select2.appendChild(option1);
i--; //因為是數組，每次循環數組長度為減1，但是i的長度也會變，最後會出現只能移動幾個的現象，而不能全部移動完
}
}
}
//全部添加到右邊的操作
function allright() {
var select1 =document.getElementById("select1");
var select2=document.getElementById("select2");
var options1=select1.getElementsByTagName("option");
for(var i=0;i<options1.length;i++) {
var option1=options1[i];
select2.appendChild(option1);
i--;
}
}
//選中添加到左邊的操作
function selectleft() {
var select2 =document.getElementById("select2");
var select1=document.getElementById("select1");
var options2 =select2.getElementsByTagName("option");
for(var i=0;i<options2.length;i++) {
var option2 =options2[i];
if(option2.selected==true) {
select1.appendChild(option2);
i--;
}
}
}
//全部添加到左邊的操作
function allleft() {
var select2= document.getElementById("select2");
var select1= document.getElementById("select1");
var options2= select2.getElementsByTagName("option");
for (var i=0;i<options2.length;i++) {
var option2 =options2[i];
select1.appendChild(option2);
i--;
}
}
</script>
</body>
</html>
結果顯示
下拉列表左右選擇案例