select选择框option重复问题

最新推荐文章于 2023-09-10 10:55:46 发布

qq_43295866

最新推荐文章于 2023-09-10 10:55:46 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript json

本文链接：https://blog.csdn.net/qq_43295866/article/details/105139212

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Map集合处理后端传来的重复数据，实现在前端下拉选择框中展示无重复的选项，避免了多次加载相同数据的问题，提高了用户体验。

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

今天公司要求根据后端传过来的数据做一个图表，可在选择框选择相应数据进行展示，效果如图所示：
在这里插入图片描述选择指标会出现相对应的图表，但是后台传过来的数据大概是酱紫的，
KPI.json

{"KPI":[{
	"JPIIndexId":1,
	"KPIIndexName":"出院患者占比",
	"KPIValue":3,
	"InputDate": "2020-01-12"
},
{
	"JPIIndexId":2,
	"KPIIndexName":"出院患者手术人数",
	"KPIValue":4,
	"InputDate": "2020-01-12"
},
{
	"JPIIndexId":1,
	"KPIIndexName":"出院患者占比",
	"KPIValue":5,
	"InputDate": "2020-01-13"
},
{
	"JPIIndexId":2,
	"KPIIndexName":"出院患者手术人数",
	"KPIValue":6,
	"InputDate": "2020-01-13"
},
{
	"JPIIndexId":1,
	"KPIIndexName":"出院患者占比",
	"KPIValue":7,
	"InputDate": "2020-01-14"
},
{
	"JPIIndexId":2,
	"KPIIndexName":"出院患者手术人数",
	"KPIValue":8,
	"InputDate": "2020-01-14"
}
]}

其中KPIIndexName就是指标名，但是他有很多重复的。

所以我们在下拉选择框时要避免出现重复数据。正常情况下我们这样写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-JSON请求数据</title>
		<!-- <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"> -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/echarts.common.min.js"></script>
		<!-- <script type="text/javascript" src="js/map.js"></script> -->

	</head>
	<body style="background-color: aliceblue;">
		<!-- 出院患者手术占比 -->
		<div>
			<select id="indexId">
				<!-- <option value="">-- 请选择 --</option> -->
			</select>
		</div>
	</body>
	<script>
		$(document).ready(function() {
			var index = $("#indexId");
			$.get('data/KPI.json').done(function(data) {
				console.log(data.KPI);
				console.log("json的值");
				for (var i = 0; i < data.KPI.length; i++) {
					**index.append("<option value='" + data.KPI[i].JPIIndexId + "'>" + data.KPI[i].KPIIndexName + "</option>");**
				}
			});
		});
	</script>
</html>

他的效果是这样的：
在这里插入图片描述处理重复数据时，我们借助map来实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-JSON请求数据</title>
		<!-- <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png"> -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		
	</head>
	<body style="background-color: aliceblue;">
		<!-- 出院患者手术占比 -->
		<div>
			<select id="indexId">
				<!-- <option value="">-- 请选择 --</option> -->
			</select>
		</div>
	</body>
	<script>
		$(document).ready(function() {
			var index = $("#indexId");
			var map = new Map();
			$.get('data/KPI.json').done(function(data) {
				for (var i = 0; i < data.KPI.length; i++) {
					map.set(data.KPI[i].JPIIndexId, data.KPI[i].KPIIndexName);
				}
				map.forEach(function(value, key, map){
					index.append("<option value='" + key + "'>" + value + "</option>");
				})
				console.log(index);
			});
		});
	</script>
</html>

这段代码就可以帮我们实现目标啦
在这里插入图片描述