列表左右移动 2017-03-23

<body>

<select id="s1" size="10" >

<option>红色</option>

<option>绿色</option>

<option>蓝色</option>

<option>黑色</option>

<option>白色</option>

</select>

 

<select id="s2" size="10" >

<option>苹果</option>

<option>香蕉</option>

<option>桃子</option>

<option></option>

<option>橙子</option>

</select><br />

<input type="button" id="t1" value="右移" />

 

        <input type="button" id="t2" value="左移" />      

         <script>

document.getElementById("t1").onclick=function(){    -----右移

var op=document.getElementById("s1").selectedOptions;---------将选中的数据赋值给op

document.getElementById("s2").appendChild(op[0]);  ------表示选中的数据中索引值为0

document.getElementById("s1").removeChild(op[0]);

}

document.getElementById("t2").onclick=function(){   ----左移

var op=document.getElementById("s2").selectedOptions;

document.getElementById("s1").appendChild(op[0]);

document.getElementById("s2").removeChild(op[0]);

}

</script>

</body>

posted @ 2017-03-23 13:17  陈观爱  阅读(138)  评论(0编辑  收藏  举报