基于Jquery轻量级下拉多选

最新推荐文章于 2025-06-06 09:03:58 发布

bigger_bird

最新推荐文章于 2025-06-06 09:03:58 发布

阅读量3.2k

点赞数 2

分类专栏：前端文章标签：下拉多选

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种基于Jquery的轻量级下拉多选解决方案，避免了引入如bootstrap等前端框架的繁琐，适用于不依赖特定前端框架的项目。文章通过展示html、CSS和JS代码，解释如何创建一个点击弹出div下拉的多选输入框，并提供了实现效果的截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下拉多选在日常的项目场景中用的不是特别多，但是每次用到，都很烦人。之前都是用的是bootstrap，但是项目中使用前端框架又不是它，导致又需要把bootstrap引入进去，而且有时候还会跟类似bootstrap前端框架冲突，导致样式出现问题。

这次就花点时间，结合网上的一些代码，自己做个一个只基于Jquery的轻量级下拉多选，不一定适合所有场景。

我们先来看效果图：

效果图2

选择框使用的是input，点击弹出div下拉。

html代码

<!DOCTYPE html>
<html lang="ZH-ch">
<head>
	<meta charset="UTF-8">
	<title>drop</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
	
	<div style="margin: 100px;display: inline-block;width: 200px; ">
		<input class="drop-header" placeholder="请输入" id="multiSelect2" />
		
		<p style="height: 100px;"></p>
		
		<input class="drop-header" placeholder="请输入" id="multiSelect" />
		
		<p style="height: 50px;"></p>
		
		<button style="width: 130px;"  onclick="getval()" >获取值</button>
		<button style="width: 130px;margin-top: 10px;" onclick="getTxtval()" >获取文本值</button>
	</div>
	
	<div style="margin: 100px;display: inline-block;width: 200px; ">
	</div>
	<!-- javascript -->
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/drop.js"></script>
	
</body>


<script>
	
	function getTxtval(){
		alert($("#multiSelect").val());
	}
	
	function getval(){
		alert( $("#multiSelect").attr("tag") );
	}
	
	$(function () {

		dropDwon({
			id: 'multiSelect2',
			myData: {
				name4: {
					val: '444'
				},
				name5: {
					val: '555'
				},
				name6: {
					val: '666'
				},
				name7: {
					val: '777'
				},
				name8: {
					val: '888'
				},
			},
			callBack:function(){
				console.log("init success");
			}
		})


		dropDwon({
			id: 'multiSelect',
			myData: {
				name1: {
					val: '111',
					selected: true
				},
				name2: {
					val: '222',
					selected: true
				},
				name3: {
					val: '333',
					selected: true
				},
				name4: {
					val: '444'
				},
				name5: {
					val: '555'
				},
				name6: {
					val: '666'
				},
				name7: {
					val: '777'
				},
				name8: {
					val: '888'
				},
			},
			callBack:function(){
				console.log("init success");
			}
		})
	})
	
</script>
</html>

CSS代码

* {
	margin: 0;
	padding: 0 ;
	list-style: none;
	box-sizing: border-box;
}

ul {
	padding-left:0 !important;
}

.drop-header {
	width: 100%;
	padding: 5px 10px;
	min-height: 32px;
	border-radius: 3px;
	background-color: #fff;
    border: 1px solid #ccc ;
    cursor: pointer;
    padding-right: 28px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAACXBIWXMAAAsTAAALEwEAmpwYAAA7amlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgICAgICAgICB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgICAgICAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXA6Q3JlYXRlRGF0ZT4yMDE3LTA4LTIyVDE2OjE0OjIzKzA4OjAwPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTctMDktMjBUMDk6NTI6NTQrMDg6MDA8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8eG1wOk1ldGFkYXRhRGF0ZT4yMDE3LTA5LTIwVDA5OjUyOjU0KzA4OjAwPC94bXA6TWV0YWRhdGFEYXRlPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOmQ4NjFkYWE3LTRhYzItNGQ0MS1hZDIyLWY4MjZiOTgzNThiNTwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+YWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYwNGQzNTBkLTlkYTYtMTFlNy04YjBmLWYxOTdkNGRhY2U0ODwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDpFODI1MzY3RTg3MTExMUU3OTlBQkZCQjQ3RTRFN0VBMTwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDpFODI1MzY3Rjg3MTExMUU3OTlBQkZCQjQ3RTRFN0VBMTwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOkU4MjUzNjgxODcxMTExRTc5OUFCRkJCNDdFNEU3RUExPC94bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpIaXN0b3J5PgogICAgICAgICAgICA8cmRmOlNlcT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDpjNWEwYzRjYS1lYzhmLTdiNDAtYTFiNi01MTg1Njc2OGY0ZTc8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTctMDktMjBUMDk6NTI6NTQrMDg6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE3IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmNoYW5nZWQ+Lzwvc3RFdnQ6Y2hhbmdlZD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPnNhdmVkPC9zdEV2dDphY3Rpb24+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDppbnN0YW5jZUlEPnhtcC5paWQ6ZDg2MWRhYTctNGFjMi00ZDQxLWFkMjItZjgyNmI5ODM1OGI1PC9zdEV2dDppbnN0YW5jZUlEPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6d2hlbj4yMDE3LTA5LTIwVDA5OjUyOjU0KzA4OjAwPC9zdEV2dDp3aGVuPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6c29mdHdhcmVBZ2VudD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNyAoV2luZG93cyk8L3N0RXZ0OnNvZnR3YXJlQWdlbnQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpjaGFuZ2VkPi88L3N0RXZ0OmNoYW5nZWQ+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgI