星空网 > 软件开发 > Java

jquery实现下拉框功能

说不清楚,直接上图

jquery实现下拉框功能

<!DOCTYPE html><html lang="en" ="http://www.w3.org/1999/xhtml"><head>  <meta charset="utf-8" />  <title></title>  <style type="text/css">    * {      margin: 0;      padding: 0;    }    div.centent {      float: left;      text-align: center;      margin: 10px;    }    span {      display: block;      margin: 2px 2px;      padding: 4px 10px;      background: #898989;      cursor: pointer;      font-size: 12px;      color: white;    }  </style>  <script src='/images/loading.gif' data-original="jquery-1.3.2.min.js"></script>  <script>    $(function () {      $("#add").click(function () {//单个添加        var $options = $("#select1 option:selected");        $options.appendTo("#select2");      });      $("#add_all").click(function () {//全部添加        $("#select1 option").each(function () {          $(this).appendTo("#select2");          /*          也可以写为:          var p=$("#select1 option");          p.appendTo("#select2");          */        });      });      $("#remove").click(function () {//同上,只不过方向相反        var $options = $("#select2 option:selected");        // var $remove = $options.remove();        $options.appendTo("#select1");      });      $("#remove_all").click(function () {//同上,只不过方向相反        var p = $("#select2 option");        p.appendTo("#select1");      });    });      </script></head><body>  <div class="centent">    <select multiple id="select1" style="width:100px;height:160px">      <option value="1">选项1</option>      <option value="2">选项2</option>      <option value="3">选项3</option>      <option value="4">选项4</option>      <option value="5">选项5</option>      <option value="6">选项6</option>    </select>    <div>      <span id="add">选中添加到右边&gt;&gt;</span>      <span id="add_all">全部添加到右边&gt;;&gt;</span>    </div>  </div>  <div class="centent">    <select multiple id="select2" style="width:100px;height:160px"></select>    <div>      <span id="remove">&lt;&lt;选中删除到左边</span>      <span id="remove_all">&lt;&lt;全部删除到左边</span>    </div>  </div></body></html>

 




原标题:jquery实现下拉框功能

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

物流国际海运:https://www.goluckyvip.com/tag/89844.html
全国海运:https://www.goluckyvip.com/tag/89845.html
回国海运:https://www.goluckyvip.com/tag/89846.html
国际 中国 海运:https://www.goluckyvip.com/tag/89847.html
国内 海运物流:https://www.goluckyvip.com/tag/89848.html
海运业务:https://www.goluckyvip.com/tag/89849.html
三亚有哪些酒店值得入住?:https://www.vstour.cn/a/366173.html
零售晚报:丽人丽妆2023年扭亏为盈 玉容初、美壹堂等自有品牌增速超40% :https://www.kjdsnews.com/a/1836649.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流