AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

jQuery实现下拉框左右移动(全部移动,已选移动)

51自学网 http://www.wanshiok.com
jQuery,下拉框,移动

用到的方法为:appendTo()
格式:$(content).appendTo(selector)
appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

看一下具体实现的代码:

<html xmlns="http://www.w3.org/1999/xhtml"><head>  <title></title>  <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>  <script type="text/javascript">    $(function () {      $("#add").click(function () {      //1,方式一//        var $option = $("#select1 option:selected");  //获取选中的选项//        var $remove = $option.remove(); //删除下拉列表中选中的选项//        $remove.appendTo("#select2");  //追加给对方        //2,方式二        var $option = $("#select1 option:selected");  //获取选中的选项        $option.appendTo("#select2");  //追加给对方      });      $("#add_all").click(function () {        var $option = $("#select1 option");        $option.appendTo("#select2");      });      $("#remove").click(function () {        var $option = $("#select2 option:selected");        $option.appendTo("#select1");      });      $("#remove_all").click(function () {        var $option = $("#select2 option");        $option.appendTo("#select1");      });    });  </script></head><body><h3>下拉框应用</h3>  <table>    <tr>      <td>        <select id="select1" multiple="multiple" style="width:100px;">          <option value="News">News</option>          <option value="Sport">Sport</option>          <option value="Education">Education</option>          <option value="Technology">Technology</option>          <option value="Art">Art</option>        </select>      </td>      <td>        <button id="add">          >|</button><br />        <button id="add_all">          >></button><br />        <button id="remove_all">          <<</button><br />        <button id="remove">          |<</button>      </td>      <td>        <select id="select2" multiple="multiple" style="width:100px;">        </select>      </td>    </tr>  </table></body></html>

运行效果:

jQuery下拉框左右移动


jQuery,下拉框,移动  
上一篇:使用Object.defineProperty实现简单的js双向绑定  下一篇:jQuery调用WebMethod(PageMethod) NET2.0的方法