- A+
所属分类：Web前端
今天jQuery学习到appendTo()函数时，定义为在被选元素的结尾插入HTML元素。
于是利用该函数做了两个Select下拉列表项左右选择移动的功能，以下为完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用appendTo实现Select下拉列表项的左右移动</title> <style type="text/css"> select { width: 110px; height: 95px; } body { text-align: center; } div { width: 130px; display: inline-block; } </style> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function () { // 选中选项添加到右边按钮功能 $(":button:eq(0)").click(function () { $("select[name='sel1'] option:selected").appendTo("select[name='sel2']"); }); // 全部选项添加到右边按钮功能 $(":button:eq(1)").click(function () { $("select[name='sel1'] option").appendTo("select[name='sel2']"); }); // 选中选项添加到左边按钮功能 $(":button:eq(2)").click(function () { $("select[name='sel2'] option:selected").appendTo("select[name='sel1']"); }); // 全部选项添加到左边按钮功能 $("button:eq(3)").click(function () { $("select[name='sel2'] option").appendTo("select[name='sel1"); }); }); </script> </head> <body> <div id="left"> <!--multiple属性规定可同时选择多个选项--> <select size="5" multiple="multiple" name="sel1"> <option value="opt1">选项一</option> <option value="opt2">选项二</option> <option value="opt3">选项三</option> <option value="opt4">选项四</option> <option value="opt5">选项五</option> </select> <button>选中添加到右边</button> <button>全部添加到右边</button> </div> <div id="right"> <!--对于 windows：按住 Ctrl 按钮来选择多个选项 对于 Mac：按住 command 按钮来选择多个选项--> <select multiple="multiple" name="sel2"> </select> <button>选中添加到左边</button> <button>全部添加到左边</button> </div> </body> </html> 代码运行效果：
