Html
    Css
    Js

    
                        
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

jQuery自定义多选下拉框(原创)

更新时间:2020-09-10 00:56:51

选择列表选项,将选项填充到下拉框,同时置灰选项禁止重复选择,删除选择的选项后,选项能重新被选择。

0