你的位置:首页 > 软件开发 > Java > jQuery学习(七)——使用JQ完成下拉列表左右选择

jQuery学习(七)——使用JQ完成下拉列表左右选择

发布时间:2017-08-25 21:00:14
1、需求:实现以下功能2、步骤分析:第一步:确定事件(鼠标单击事件click)第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]第三步:将获取到的option添加到右侧的下拉列表中 ...

jQuery学习(七)——使用JQ完成下拉列表左右选择

1、需求:实现以下功能

jQuery学习(七)——使用JQ完成下拉列表左右选择

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">&gt;&gt;</a></p>57       <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">&gt;&gt;&gt;</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="#" >&lt;&lt;</a></p>66       <p><a href="#" >&lt;&lt;&lt;</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 (#换成@)。

可能感兴趣文章

我的浏览记录