1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!--引入框架--> 7 <link href="resource/bootstrap/css/bootstrap.css" rel="stylesheet"> 8 <script src="resource/jQuery/jquery-1.11.3.js"></script> 9 <script src="resource/bootstrap/js/bootstrap.js"></script> 10 11 <!--引入自己的js--> 12 <script src="js/demo1.js"></script> 13 14 <style> 15 /*css选择器：class,id,标签,复合选择器*/ 16 </style> 17 </head> 18 <body> 19 <script> 20 function MoveOption(obj1,obj2,flag) { 21 for (var i = 0; i < obj1.options.length; i++) { 22 if(flag){ 23 var opt = new Option(obj1.options[i].text, obj1.options[i].value); 24 obj2.options.add(opt); 25 obj1.remove(i); 26 i = i - 1; 27 } 28 else 29 { 30 if (obj1.options[i].selected) { 31 var opt = new Option(obj1.options[i].text, obj1.options[i].value); 32 obj2.options.add(opt); 33 obj1.remove(i); 34 i = i - 1; 35 } 36 37 } 38 } 39 } 40 </script> 41 <select id="left" multiple=true size=4> 42 <option value='0'>0</option> 43 <option value='1'>1</option> 44 <option value='2'>2</option> 45 <option value='3'>3</option> 46 <select> 47 <input type=button value='>' onclick="MoveOption(document.getElementById('left'),document.getElementById('right'))"> 48 <input type=button value='>>' onclick="MoveOption(document.getElementById('left'),document.getElementById('right'),true)"> 49 <input type=button value='<' onclick="MoveOption(document.getElementById('right'),document.getElementById('left'))"> 50 <input type=button value='<<' onclick="MoveOption(document.getElementById('right'),document.getElementById('left'),true)"> 51 <select id="right" multiple=true size=4> 52 <select> 53 54 </body> 55 </html>