1 doctype html> 2 html> 3 head> 4 meta charset=utf-8> 5 title>下拉列表左右选择title> 6 style type=text/css> 7 div { 8 width: 200px; 9 float: left;10 }11 select {12 width: 100px;13 height: 180px;14 padding: 10px;15 }16 style>17 head>18 body>19 div>20 select multiple=multiple id=leftsel style=margin-left: 17px;>21 option>选项1option>22 option>选项2option>23 option>选项3option>24 option>选项4option>25 option>选项5option>26 option>选项6option>27 option>选项7option>28 option>选项8option>29 option>选项9option>30 option>选项10option>31 select>32 br />33 input type=button value=选中添加到右边 -> onclick=choicetoright()>34 br />35 input type=button value=全部添加到右边 --> onclick=alltoright()>36 div>37 38 div>39 select multiple=multiple id=rightsel style=margin-left: 17px;>select>40 br />41 input type=button value= onclick=choicetoleft()>42 br />43 input type=button value= onclick=alltoleft()>44 div>45 46 script type=text/javascript>47 // 获取select48 var leftsel = document.getelementbyid(leftsel);49 var rightsel = document.getelementbyid(rightsel);50 // 选中添加到右边51 function choicetoright() {52 tosel(leftsel, rightsel, true);53 }54 // 全部添加到右边55 function alltoright() {56 tosel(leftsel, rightsel, false);57 }58 // 选中添加到左边59 function choicetoleft() {60 tosel(rightsel, leftsel, true);61 }62 // 全部添加到左边63 function alltoleft() {64 tosel(rightsel, leftsel, false);65 }66 // 如果flag为true，就是选中添加，如果为false，就是全部添加67 function tosel(fromsel, tosel, flag) {68 var subsel = fromsel.getelementsbytagname(option);69 if (flag) {70 for (var i = 0; i subsel.length; i++) {71 if (subsel[i].selected) {72 tosel.appendchild(subsel[i]);73 // 因为subsel的length每次会-1，所以让i归零，保证每次for循环都能被执行到74 i--;75 }76 }77 } else {78 for (var i = 0; i subsel.length; i++) {79 tosel.appendchild(subsel[i]);80 i--;81 }82 }83 }84 script>85 body>86 html>