基于jQuery实现下拉框

2020-05-22 15:13:08易采站长站整理

项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用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); //获取选中的选项