一、直接上代码
1<!DOCTYPE html>2<html>3<head>4<metacharset="utf-8"/>5<title>index</title>6</head>7<body>8<div>9<selectid="leftSelector"multiple="multiple"name="SmsListOnLeft"style="height:100px; width:50px">10<optionvalue="0">0</option>11<optionvalue="1">1</option>12<optionvalue="2">2</option>13<optionvalue="3">3</option>14<optionvalue="4">4</option>15<optionvalue="5">5</option>16</select>1718<spanstyle="top: 30px; position: fixed;">19<inputtype="button"value="<<"id="btnLeft"/>20<inputtype="button"value=">>"id="btnRight"/>21</span>2223<selectid="rightSelector"multiple="multiple"name="SmsListOnRight"style="height:100px; width:50px; margin-left:80px">24<optionvalue="6">A</option>25<optionvalue="7">B</option>26<optionvalue="8">C</option>27<optionvalue="9">D</option>28<optionvalue="10">E</option>29</select>3031</div>3233<
br>3435<inputtype="button"onclick="selectAll()"id="btnSelectAll"value="selectAll"/>3637<scriptsrc="js/jquery-2.1.4.js"></script>38<script>39$("#btnRight").click(function() {40//数据option选中的数据集合赋值给变量vSelect41varvSelect=$("#leftSelector option:selected");42//克隆数据添加到 rightSelector 中43vSelect.clone().appendTo("#rightSelector");44//同时移除 leftSelector 中的 option45vSelect.remove();46});4748//right move49$("#btnLeft").click(function() {50varvSelect=$("#rightSelector option:selected");51vSelect.clone().appendTo("#leftSelector");52vSelect.remove();53});5455functionselectAll() {56varlst1=window.document.getElementById("rightSelector");57varlength=lst1.options.length;58for(vari=0; i<length; i++) {59varv=lst1.options[i].value;//option内的value60vart=lst1.options[i].text;//显示的文本61alert(v+":"+t);62}63}64</script>6566</body>67</html>
二、效果图