<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.3.1.min.js"></script> <style> #leftName , #btn,#rightName{ float: left; width: 100px; height: 300px; } #toRight,#toLeft{ margin-top:100px ; margin-left:30px; width: 50px; } .border{ height: 500px; padding: 100px; } </style> <script> $ ( "# ToRight") the Click (function () {. // ToRight $ (function () { // Requirements: drop-down list to select the function to realize about the selected item // get the object to the right of the drop-down list, append (left drop-down list to select the option) . $ ( "# rightName") the append ($ ( "# leftName> the Option: the Selected")); }); // toLeft $ ( "# toLeft") the Click (function (.) { // get the right selected the appendTo option, move it to the left of the drop-down list $ ( "# rightName> the Option: the Selected") the appendTo ($ ( "# leftName"));. }); // Double-click the left option, select move to the right, note: the effect can not be achieved, add dynamic tags can not be bound event . / * $ ( "# leftName> the Option") the DblClick (function () { . $ ( "# rightName") the append (the this); }) * / // Double-click the right option, move to the left select, pay attention: the effect can not be achieved, the label can not be added dynamically bind events / * $ ( "# rightName> Option") DblClick (function () {. $ ( "# leftName") the append (the this);. }) * / <div class = "border"> <select id="leftName" multiple="multiple"> <option>张三</option> // left double click option, move to the right select the $ ( "# leftName") ON ( "DblClick", "Option", function () {. $ ( "# RightName") the append (the this);. }) // hand side of the option, movement to the left select the $ ( "# rightName") ON ( "DblClick", "Option", function () {. $ ( "# leftName") the append (the this);. }) }); < / Script> </ head> <body> <the Option> John Doe </ the Option> <the Option> Wang Wu </ the Option> <the Option> Zhao six </ the Option> </ the SELECT> <div the above mentioned id = "btn"> <input type="button" id="toRight" value="-->"><br> <input type="button" id="toLeft" value="<--"> </div> <select id="rightName" multiple="multiple"> <option>钱七</option> </select> </div> </body> </html>