jQuery自定义多选下拉框

浏览：601次- 评论：1次- 发布时间：2020-09-12

Html

Css


    
        

        
       
    
    
        北京
        上海
        成都
        广州
        哈哈哈哈哈
        黑恶hi额黑恶黑凤凰IE
        天津

ul li {
	list-style:none;
}
.selectbox {
	width:200px;
	height:auto;
	margin:0 auto;
	position:relative;
}
.w_select {
	width:200px;
	min-height:39px;
	position:absolute;
	top:0;
	left:0;
	border:1px solid #888888;
	border-radius:3px;
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	padding:2px;
	box-sizing:border-box;
}
.selectbox ul {
	width:200px;
	position:absolute;
	left:0;
	top:23px;
	border:1px solid #D9D9D9;
	padding-inline-start:0px;
}
.selectbox ul li {
	line-height:25px;
	padding-left:5px;
	background:#FFFFFF;
}
.selectbox ul li:hover {
	background:#0F80F6;
	color:#FFFFFF;
}
.selected {
	width:auto;
	height:29px;
	padding:0 3px;
	border:1px solid #7D7D7D;
	border-radius:2px;
	line-height:25px;
	margin:2px;
	position:relative;
}
.w_close {
	width:10px;
	height:10px;
	cursor:pointer;
	margin-left:2px;
}
.w_down {
	width:10px;
	height:10px;
	position:absolute;
	right:0;
	top:25%;
	cursor:pointer;
	margin-left:2px;
}
.w_lion {
	pointer-events:none;
}
.w_chosecard {
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}

function close() {
    $(".selected").on("click", ".w_close", function() {
        $(this).parent(".selected").remove()
        var val = $(this).parent(".selected").children("span").text()
        var li = $(".w_chose").children("li")
        $(".w_chose").css("top", $(".w_select").height() - 10)
        for (var n = 0; n < li.length; n++) {
            var tex = li[n].innerHTML;

if (val == tex) {
                console.log(n)
                $(".w_chose").children("li").eq(n).removeClass("w_lion")
                $(".w_chose").children("li").eq(n).attr("style", "")
            }
        }
    })
}

$(".w_down").click(function() {
    $(".w_chose").toggle()
})
$(".w_chose").on("click", "li", function() {
    $(".w_chose").toggle();
    $(this).css("background", "#D9D9D9")
    $(this).addClass("w_lion")
    var text = $(this).text()
    var chosen = ''
    chosen = '<div class="selected">' +
        '<span>' + text + '</span>' +
        '<img class="w_close"  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAPj7+DA5S8uKR70n9YMAAAABdFJOUwBA5thmAAAALElEQVQI12NgAILQ0BCGqvApDFnzljBUrVrCELdqCkP4qhAwDeKDxYHyQHUAY+4QPE3ZrqEAAAAASUVORK5CYII="/>' +
        '</div>'
    $(".w_chosecard").append(chosen)
    $(".w_chose").css("top", $(".w_select").height() - 10)
    close();
})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.0.0