Jquery实现下拉列表左右选择
知识点：
jquery 的 click dbclick 事件 appendTo方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉列表左右选择</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> $(function(){ //1.选中单击去右边 $("#selectOneToRight").click(function(){ $("#left option:selected").appendTo($("#right")); }); //2.单击全部去右边 $("#selectAllToRight").click(function(){ $("#left option").appendTo("#right"); }); //3.选中双击去右边 $("#left option").dblclick(function(){ $("#left option:selected").appendTo($("#right")); }) }); </script> </head> <body> <table border="1" width="600" align="center"> <tr> <td> 分类名称 </td> <td> <input type="text" name="cname" value="手机数码"/> </td> </tr> <tr> <td> 分类描述 </td> <td> <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea> </td> </tr> <tr> <td> 分类商品 </td> <td> <span style="float: left;"> <font color="green" face="宋体">已有商品</font><br/> <select multiple="multiple" style="width: 100px;height: 200px;" id="left"> <option>IPhone6s</option> <option>小米4</option> <option>锤子T2</option> </select> <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p> <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p> </span> <span style="float: right;"> <font color="red" face="宋体">未有商品</font><br/> <select multiple="multiple" style="width: 100px;height: 200px;" id="right"> <option>三星Note3</option> <option>华为6s</option> </select> <p><a href="#" ><<</a></p> <p><a href="#" ><<<</a></p> </span> </td> </tr> <tr> <td colspan="2"> <input type='submit' value="修改"/> </td> </tr> </table> </body> </html>
