JQuery----Demo----左右select选择

xiaoxiao2021-02-28  9

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#left1").click(function(){ $("#leftSelectId option:selected:first").removeAttr("selected").prependTo("#rightSelectId"); }); $("#left2").click(function(){ $("#leftSelectId option:selected").removeAttr("selected").prependTo("#rightSelectId"); }); $("#left3").click(function(){ $("#leftSelectId option").removeAttr("selected").prependTo("#rightSelectId"); }); $("#r3").click(function(){ $("#rightSelectId option").removeAttr("selected").prependTo("#leftSelectId"); }); }); </script> <style type="text/css"> .textClass { background-color: #ff0000; } </style> </head> <body> <table> <tr> <td> <select id="leftSelectId" style="width:100px" multiple="multiple" size="6"> <option>11</option> <option>22</option> <option>33</option> </select> </td> <td> <input id="left1" type="button" value=">" style="width:50px"/> <br/> <input id="left2" type="button" value=">>" style="width:50px"/> <br/> <input id="left3" type="button" value=">>>" style="width:50px"/> <br/> <input id="r1" type="button" value="<" style="width:50px"/> <br/> <input id="r2" type="button" value="<<" style="width:50px"/> <br/> <input id="r3" type="button" value="<<<" style="width:50px"/> <br/> </td> <td> <select id="rightSelectId" style="width:100px" multiple="multiple" size="6"> <option></option> </select> </td> </tr> </table> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-2000001.html

最新回复(0)