select选择框option重复问题

最新推荐文章于 2023-06-08 14:37:13 发布

qq_43295866

最新推荐文章于 2023-06-08 14:37:13 发布

阅读量3.2k

点赞数

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

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

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

qq_43295866

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
select选择框option重复问题

今天公司要求根据后端传过来的数据做一个图表，可在选择框选择相应数据进行展示，效果如图所示：选择指标会出现相对应的图表，但是后台传过来的数据大概是酱紫的，KPI.json{"KPI":[{ "JPIIndexId":1, "KPIIndexName":"出院患者占比", "KPIValue":3, "InputDate": "2020-01-12"},{ "JPIIndexId"...
复制链接

扫一扫

专栏目录