1、需求:实现以下功能2、步骤分析:第一步:确定事件(鼠标单击事件click)第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]第三步:将获取到的option添加到右侧的下拉列表中 ...
1、需求:实现以下功能
2、步骤分析:
第一步:确定事件(鼠标单击事件click)
第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
第三步:将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
3、具体代码实现:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉列表左右选择</title> 6 <script type="text/javascript" src='/images/loading.gif' data-original="../js/jquery-1.8.3.js" ></script> 7 <script> 8 $(function(){ 9 //1.选中单击去右边10 $("#selectOneToRight").click(function(){11 $("#left option:selected").appendTo($("#right"));12 });13 14 //2.单击全部去右边15 $("#selectAllToRight").click(function(){16 $("#left option").appendTo($("#right"));17 });18 19 //3.选中双击去右边20 $("#left option").dblclick(function(){21 $("#left option:selected").appendTo($("#right"));22 });23 });24 </script>25 </head>26 <body>27 <table border="1" width="600" align="center">28 <tr>29 <td>30 分类名称31 </td>32 <td>33 <input type="text" name="cname" value="手机数码"/>34 </td>35 </tr>36 <tr>37 <td>38 分类描述39 </td>40 <td>41 <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>42 </td>43 </tr>44 <tr>45 <td>46 分类商品47 </td>48 <td>49 <span style="float: left;">50 <font color="green" face="宋体">已有商品</font><br/>51 <select multiple="multiple" style="width: 100px;height: 200px;" id="left" >52 <option>IPhone7</option>53 <option>小米5X</option>54 <option>荣耀V9</option>55 </select>56 <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>57 <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>58 </span>59 <span style="float: right;">60 <font color="red" face="宋体">未有商品</font><br/>61 <select multiple="multiple" style="width: 100px;height: 200px;" id="right">62 <option>OPPO R11</option>63 <option>华为Nova2 Plus</option>64 </select>65 <p><a href="#" ><<</a></p>66 <p><a href="#" ><<<</a></p>67 </span>68 </td>69 </tr>70 <tr>71 <td colspan="2">72 <input type='submit' value="修改"/>73 </td>74 </tr>75 </table>76 </body>77 </html>
在谷歌浏览器内运行,就能实现需求中所要的功能。
原标题:jQuery学习(七)——使用JQ完成下拉列表左右选择
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。