基于jQuery实现下拉框

前端技术 2023/09/03 JavaScript

项目中经常会遇到下拉框，在扁平化和响应式布局大行其道的今天，使用jQuery来实现下拉框就十分的必要了，而且也会美观很多，这里就给大家推荐一段基于jQuery的下拉框代码。

jQuery代码：

复制代码 代码如下:

        $(function(){
            $(\'#add\').click(function(){
                var $options = $(\'#select1 option:selected\');
                $options.appendTo(\"#select2\");
            });
            $(\'#remove\').click(function(){
                var $options = $(\'#select2 option:selected\');
                $options.appendTo(\"#select1\");
            });
            $(\'#add_all\').click(function(){
                var $options = $(\'#select1 option\');
                $options.appendTo(\"#select2\");
            });
            $(\'#remove_all\').click(function(){
                var $options = $(\'#select2 option\');
                $options.appendTo(\"#select1\");
            });
            $(\'#select1\').dblclick(function(){
               var $options = $(\"option:selected\",this); //获取选中的选项
                $options.appendTo(\'#select2\');
            });
            $(\'#select2\').dblclick(function(){
                var $options = $(\"option:selected\",this); //获取选中的选项
                $options.appendTo(\'#select1\');
            });
        });

HTML代码：

复制代码 代码如下:

   <div style=\"width: 250px\">
   <div class=\"content\" style=\"float: left\">
       <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>
           <option value=\"7\">选项7</option>
           <option value=\"8\">选项8</option>
       </select>
       <div>
           <span id=\"add\">选中添加到右边>></span><br>
           <span id=\"add_all\">全部添加到右边>></span>
       </div>
   </div>
   <div style=\"float: right;\">
       <select multiple id=\"select2\" style=\"width: 100px;height: 160px;\">
       </select>
       <div>
           <span id=\"remove\"><<选中删除到左边</span><br>
           <span id=\"remove_all\"><<全部删除到左边</span>
       </div>
   </div>
</div>

是不是很简单？小伙伴们需要的话直接就可以拿到项目中使用了。

本文地址：https://www.stayed.cn/item/7604

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案