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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791