jQuery可多选的下拉选择标签代码免费下载

jQuery可多选的下拉选择标签代码,默认设置多个标签,可以选择添加多个标签,对已选择的标签进行删除。

JS代码

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
         
        //点击输入框时候 
        $(".selectBox .imitationSelect").on("click",function(event){ 
            $(this).parent().next().toggle();//ul弹窗展开 
            $(this).next().toggleClass("fa-caret-up")//点击input选择适合,小图标动态切换 
            if($(this).next().hasClass("fa-caret-down")){ 
                $(this).next().removeClass("fa-caret-down").addClass("fa-caret-up")//点击input选择适合,小图标动态切换 
            }else{ 
                $(this).next().addClass("fa-caret-down").removeClass("fa-caret-up")//点击input选择适合,小图标动态切换 
            } 
            if (event.stopPropagation) {    
                // 针对 Mozilla 和 Opera    
                event.stopPropagation();    
            }else if (window.event) {    
                // 针对 IE    
                window.event.cancelBubble = true;    
            }   
        }); 
         
        //点击右边箭头icon时候 
        $(".selectBox .fa").on("click",function(event){ 
            $(this).parent().next().toggle();//ul弹窗展开 
            if($(this).hasClass("fa-caret-down")){ 
                $(this).removeClass("fa-caret-down").addClass("fa-caret-up")//点击input选择适合,小图标动态切换 
            }else{ 
                $(this).addClass("fa-caret-down").removeClass("fa-caret-up")//点击input选择适合,小图标动态切换 
            } 
            if (event.stopPropagation) {    
                // 针对 Mozilla 和 Opera    
                event.stopPropagation();    
            }else if (window.event) {    
                // 针对 IE    
                window.event.cancelBubble = true;    
            }   
        }); 
         
        //定义一个存储数据的数组,用于下面重复选择判断,删除标签 
        var oliIdArray = []; 
        $(".selectUl li").click(function(event){ 
            event=event||window.event;  
            $(this).addClass("actived_li").siblings().removeClass("actived_li");//点击当前的添加。actived_li这个类;其他的移除这个类名 
            var oliId = $(this).attr("oliId"); 
            if(oliIdArray.indexOf(oliId)>-1){ 
         
            }else{ 
                oliIdArray.push(oliId); 
                $(this).parent().prev().children().attr("oliId",oliIdArray);//把当前点击的oliId赋值到显示的input的oliId里面 
                $("#role_select").append("<span class='person_root'><span>"+$(this).text()+"</span><i class='close' oliId='" + oliId + "' >x</i></span>"); 
            } 
             
            //事件委托进行绑定事件,每个删除事件得以进行 
            var role_select = document.getElementById("role_select"); 
            var role_span= role_select.getElementsByTagName('i'); 
            console.log("span的选择个数"+role_span.length) 
            for(var i=0;i<role_span.length;i++){   
                role_span[i].onclick = function(){   
                    var oliId = $(this).attr("oliId"); 
                    console.log("oliId"+oliId) 
                    for (var i = 0; i < oliIdArray.length; i++){ 
                        if (oliIdArray[i] === oliId){ //表示数组里面有这个元素 
                            var id = i;//元素位置 
                            console.log(oliId) 
                            console.log(id) 
                            console.log(oliIdArray);    
                            oliIdArray.splice(id,1); 
                        } 
                    } 
                    console.log(oliIdArray);   
                     
                    $(this).parent().remove(); 
                }   
            }   
        }); 
 
        //点击任意地方隐藏下拉 
        $(document).click(function(event){ 
            event=event||window.event;  
            $(".inputCase .fa").removeClass("fa-caret-up").addClass("fa-caret-down")//当点隐藏ul弹窗时候,把小图标恢复原状 
            $(".selectUl").hide();//当点击空白处,隐藏ul弹窗 
        }); 
         
    }) 
     
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录