下拉列表左右選擇
* 下拉選擇框
<select>
<option>111</option>
<option>111</option>
</select>
* 創建一個頁面
** 兩個下拉選擇框
- 設置屬性 multiple屬性
** 四個按鈕，有事件
* 選中添加到右邊
步驟
/*
1、獲取select1里面的option
- getElementsByTagName()返回是數組
- 遍歷數組，得到每一個option
2、判斷option是否被選中
- 屬性 selected，判斷是否被選中
** selected= true: 選中
** selected= false：沒有選擇
3、如果是選中，把選擇的添加到右邊去
4、得到select2
4、添加選擇的部分
- appendChild方法
*/
* 全部添加到右邊
步驟
/*
1、獲取第一個select下面的option對象
2、返回數組，遍歷數組
3、得到每一個option對象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
* 選中添加到左邊
步驟
/*
1、獲取select2里面的option對象
2、返回是數組，遍歷數組
3、得到每一個option對象
4、判斷option是否被選中
- if條件 屬性 selected == true：選擇
5、獲取select1
6、添加到select1里面
- 使用appendChild方法
*/
* 全部添加到左邊
步驟
/*
1、獲取select2里面的option對象
2、返回是數組，遍歷數組
3、得到每一個option對象
4、獲取到select1
5、添加到select1里面
- 使用appendChild方法
*/
<body> <div id="s1" style="float:left;"> <div> <select id="select1" multiple="multiple" style="width:100px;height:100px;"> <option>AAAAAAAA</option> <option>BBBBBBBB</option> <option>CCCCCCCC</option> <option>DDDDDDDD</option> <option>EEEEEEEE</option> </select> </div> <div> <input type="button" value="選中添加到右邊" onclick="selToRight();"/><br/> <input type="button" value="全部添加到右邊" onclick="allToRight();"/> </div> </div> <div id="s2"> <div> <select id="select2" multiple="multiple" style="width:100px;height:100px;"> <option>QQQQQQQQ</option> </select> </div> <div> <input type="button" value="選中添加到左邊" onclick="selToLeft();"/><br/> <input type="button" value="全部添加到左邊" onclick="allToLeft();"/> </div> </div> <script type="text/javascript"> //實現全部添加到左邊 function allToLeft() { /* 1、獲取select2里面的option對象 2、返回是數組，遍歷數組 3、得到每一個option對象 4、獲取到select1 5、添加到select1里面 - 使用appendChild方法 */ //獲取select2 var select2 = document.getElementById("select2"); //獲取select1 var select1 = document.getElementById("select1"); //獲取select2里面的option var options1 = select2.getElementsByTagName("option"); //遍歷數組 for(var m=0;m<options1.length;m++){ //得到每一個option var op11 = options1[m]; //添加到select1里面 select1.appendChild(op11); m--; } } //選擇添加到左邊 function selToLeft() { /* 1、獲取select2里面的option對象 2、返回是數組，遍歷數組 3、得到每一個option對象 4、判斷option是否被選中 - if條件 屬性 selected == true：選擇 5、獲取select1 6、添加到select1里面 - 使用appendChild方法 */ //獲取select1 var s1 = document.getElementById("select1"); //獲取到select2 var s2 = document.getElementById("select2"); //得到s1里面的option對象 var opss = s2.getElementsByTagName("option"); //遍歷數組 for(var aa=0;aa<opss.length;aa++) { //得到每一個option var op = opss[aa]; //判斷是否被選中 if(op.selected == true) { //被選中 //添加到select1里面 s1.appendChild(op); aa--; } } } //全部添加到右邊 function allToRight() { /* 1、獲取第一個select下面的option對象 2、返回數組，遍歷數組 3、得到每一個option對象 4、得到select2 5、添加到select2下面 - appendChild方法 */ //得到select2 var s2 = document.getElementById("select2"); //得到select下面的option對象 var s1 = document.getElementById("select1"); var ops = s1.getElementsByTagName("option");//返回的是數組 //遍歷數組 for(var j=0;j<ops.length;j++) { //得到每一個option對象 var op1 = ops[j]; //添加option到s2下面 s2.appendChild(op1); j--; } } //實現選中添加到右邊 function selToRight() { /* 1、獲取select1里面的option - getElementsByTagName()返回是數組 - 遍歷數組，得到每一個option 2、判斷option是否被選中 - 屬性 selected，判斷是否被選中 ** selected= true: 選中 ** selected= false：沒有選擇 3、如果是選中，把選擇的添加到右邊去 4、得到select2 4、添加選擇的部分 - appendChild方法 */ //獲取select1里面的option //獲取select2 var select2 = document.getElementById("select2"); //得到select1 var select1 = document.getElementById("select1"); //得到option var options1 = select1.getElementsByTagName("option"); //遍歷數組 for(var i=0;i<options1.length;i++) { var option1 = options1[i];//得到每一個option對象 //判斷是否被選中 if(option1.selected == true) { //添加到select2里面 select2.appendChild(option1); i--; } } } </script> </body>