二级菜单带模糊查询的输入框

最新推荐文章于 2022-06-30 15:59:43 发布

帅气的小面包

最新推荐文章于 2022-06-30 15:59:43 发布

阅读量909

点赞数

分类专栏：学习道路

本文链接：https://blog.csdn.net/weixin_44285195/article/details/90241582

版权

学习道路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端初级菜鸟，刚刚找到个输入框插件，带模糊匹配数据，并且可以有二级菜单，我就试了下。

效果图

在这里插入图片描述
用了jQuery自定义下拉框插件select-mania，插件地址：http://www.jq22.com/jquery-info20485
页面引入的js和css

html页面部分内容：

<body>
	<select class="demo-5">
	</select>
</body>

js代码：

$(function() {
	//后台传递过来的json数据
	var data = JSON.parse($(".processData").val());
	
	for ( var key in data) {//循环数据显示出来
		$("<optgroup class='opt"+key+"' label='"+key+"'></optgroup>").appendTo($(".demo-5")); 
		for(var i in data[key]){
			var op = data[key][i];
			$("<option>"+op+"</option>").appendTo($(".opt"+key)); 
		}
	}
	$('.demo-5').selectMania({
		    size: 'small', 
		    themes: ['square','blue'], 
		    placeholder: '请选择',
			removable: true,
			search: true,
			empty:true
		});
	//去掉自带的图标
	$(".select-mania-arrow").css("display","none");
	$(".select-mania-clear").css("display","none");
	$(".select-mania-inner").css("padding-left","0");
})

json数据大概是这个样子的
在这里插入图片描述

帅气的小面包

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
二级菜单带模糊查询的输入框

前端初级菜鸟，刚刚找到个输入框插件，带模糊匹配数据，并且可以有二级菜单，我就试了下。效果图用了jQuery自定义下拉框插件select-mania，插件地址：http://www.jq22.com/jquery-info20485页面引入的js和csshtml页面部分内容：<body> <select class="demo-5"> </selec...
复制链接

扫一扫