首页 > 语言 > JavaScript > 正文

基于jQuery实现下拉框

2024-05-06 14:50: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); //获取选中的选项
                $options.appendTo('#select1');
            });

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选