Home > Web Front-end > JS Tutorial > How to use jQuery plug-in selectToSelect_jquery

How to use jQuery plug-in selectToSelect_jquery

WBOY
Release: 2016-05-16 17:20:49
Original
1139 people have browsed it

I always wanted to find one like this online, but I never found it, so I wrote one myself. I hope it can help the children's shoes I see.
If anyone has a more powerful plug-in, please leave me an address, thank you very much!
The effect is as follows:

How to use jQuery plug-in selectToSelect_jquery

The code is as follows:

Copy the code The code is as follows:

(function($){
    $.fn.selectToSelect=function(options){
        if($.type(options)=="string"){
            var $this=$(this);
            if(options=="getSelectedIds"){
                var ids="";
                var arr=$("#" $this.attr("id") "seReSelect option");
                arr.each(function(i){
                     if(arr.length-1==i){
                        ids =$(this).attr("id");
                     }else{
                        ids =$(this).attr("id") ",";
                     }
                });
                return ids;
            }
            return $this;
        }
        var defaults={
            size:10,
            opSelect:[],
            opReSelect:[],
            onChange:function(data){}
        };
        var opts= $.extend(defaults,options);
        return this.each(function(){
           var $this=$(this);
            var str="";
            str ="";
            str ="";
            str ="";
            str ="";
            str+="";
            str+="";
            str+="
";
            str ="";
            str ="
";
            str ="";
            str ="  ";
            str ="    ";
            str ="  ";
            str ="  ";
            str ="    ";
            str ="  ";
            str ="  ";
            str ="  ";
            str ="   ";
            str ="  ";
            str ="    ";
            str ="      ";
            str ="  ";
            str ="
";
            str ="
";
            str =" ";
            str+="
";
            str+="     ";
            str+="        ";
            str+="       ";
            str+="    ";
            str+="      ";
            str+="         ";
            str+="    ";
            str+="    ";
            str+=" 
";
            str+="
";
           $this.html(str);
            //need juqery ui plugin
           $this.find("button").button();
            //"+$this.attr("id")+"
           $this.find("#"+$this.attr("id")+"btnSelectAll").click(function(){
               $this.find("option[name='"+$this.attr("id")+"opSelect']").each(function(i){
                   $("").appendTo("#"+$this.attr("id")+"seReSelect");
               });
               $("#"+$this.attr("id")+"seSelect").empty();
               opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
           });

            $("#"+$this.attr("id")+"btnReSelectAll").click(
                function(){
                    $("option[name='"+$this.attr("id")+"opReSelect']").each(function(i){

                        $("").appendTo("#"+$this.attr("id")+"seSelect");
                    });
                    $("#"+$this.attr("id")+"seReSelect").empty();
                    opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
                }
            );

            $("#"+$this.attr("id")+"btnSelectOne").click(
                function(){
                    if($("#"+$this.attr("id")+"seSelect").val()){
                        var arrChecked= $("#"+$this.attr("id")+"seSelect option:checked")
                        for(var i=0;i $("").appendTo("#"+$this.attr("id")+"seReSelect");
                            $("option[name='"+$this.attr("id")+"opSelect']").each(function(j){
                                if(this.value==arrChecked[i].value){
                                    $(this).remove();
                                }
                            });
                        }
                        opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
                    }
                    else
                    {
                        $.dashboard.alert("Tip","Please select a report!")
                    }
                }
            );

            $("#"+$this.attr("id")+"btnReSelectOne").click(
                function(){
                    if($("#"+$this.attr("id")+"seReSelect").val()){
                        var arrChecked= $("#"+$this.attr("id")+"seReSelect option:checked");
                        for(var i=0;i $("").appendTo("#"+$this.attr("id")+"seSelect");
                            $("option[name='"+$this.attr("id")+"opReSelect']").each(function(j){
                                if(this.value==arrChecked[i].value){
                                    $(this).remove();
                                }
                            });
                        }
                        opts.onChange($("option[name='"+$this.attr("id")+"opReSelect']"));
                    }
                    else
                    {
                        $.dashboard.alert("Tip","Please select a report!")
                    }
                }
            );

            $("#" $this.attr("id") "btnUp").click(
                function(){
                    if($("#" $this.attr("id") "seReSelect").val()&&$("#" $this.attr("id") "seReSelect option:checked").length==1){
                        var index=$("#" $this.attr("id") "seReSelect")[0].selectedIndex;
                        $($("option[name='" $this.attr("id") "opReSelect']")[index]).after($("option[name='" $this.attr("id") "opReSelect']")[index-1]);
                        opts.onChange($("option[name='" $this.attr("id") "opReSelect']"));
                    }
                    else
                    {
                        $.dashboard.alert("Tip","Please select a report!")
                    }
                }
            );
            $("#" $this.attr("id") "btnDown").click(
                function(){
                    if($("#" $this.attr("id") "seReSelect").val()&&$("#" $this.attr("id") "seReSelect option:checked").length==1){
                        var index=$("#" $this.attr("id") "seReSelect")[0].selectedIndex;
                        $($("option[name='" $this.attr("id") "opReSelect']")[index]).before($("option[name='" $this.attr("id") "opReSelect']")[index 1]);
                        opts.onChange($("option[name='" $this.attr("id") "opReSelect']"));
                    }
                    else
                    {
                        $.dashboard.alert("Tip","Please select a report!")
                    }
                }
            );
        });
    };
})(jQuery);


使用方法:

复制代码 代码如下:

var opSelect1=[{id:'1',name:'tip1'},{id:'2',name:'tip2'}];
          var opReSelect1=[{id:' 3',name:'tip3'},{id:'3',name:'tip3'}];
         $("#selectToSelect1").selectToSelect({
               size:10,
               opSelect :opSelect1,
                opReSelect:opReSelect1,
               onChange:function(options){
                var ids=  $("#selectToSelect1").selectToSelect("getSelectedIds");          
                }
            }) ;
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template