开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

我在做可视化大屏的时候，我遇到一个问题。因为我的大屏不是VUE的架构，而是传统的html，所以这个select选择器不能用vue的数据绑定来做，而且还需要把这个select选择器的背景透明，边框去除。因为我对前端真的不熟悉。所以在这里记录下实现方法，

因为我的大屏需要对不同活动进行可视化展示，所以需要一个选择器select，但是为了美观性我们需要把背景和边框去掉，不然很丑，同时select选择器的选项option需要是通过接口获得的。

首先要在html文件中做一个select标签，里面不要添加option

一、select去除背景和边框

实现的css配置如下。

#selected {
	height: 50px;
	color: #fff;
        font-size: .4rem;
        line-height: .8rem;
	text-align: center;
	text-align-last: center;
	/* 背景透明 */
	background: none;
	/* 去掉三角 */
	appearance: none;
        /* 兼容Firefox */
	-moz-appearance: none;
	/* 兼容Safari 和 Chrome */
	-webkit-appearance: none;
	/* 去掉边框 */
	border: none;
	box-shadow: none;
}

二、访问接口，并根据返回数据为select添加option

我这里是通过axios访问的接口，所以需要先引入依赖。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

访问接口，并根据接口返回数据为select添加option

axios.get(url).then((res) => {
        let activities_list = res.data.map((item) => {
            let item_temp = JSON.parse(item);

            return Object.assign(
                {},
                {
                    //界面部分
                    id: item_temp._id,
                    name: item_temp.name,
                }
            );
        });
        console.log("活动列表", activities_list);

        for (var i = 0; i < activities_list.length; i++) {
            $("#selected").append($("<option value=\"" + activities_list[i].id + "\">" + activities_list[i].name + "</option>"));
        }
        // console.log(document.getElementById("selected").value)
    });

这个用的jquery，也要记得引用这个依赖文件。

最终效果

最后实现的效果就是这样了，可以通过一个非常隐蔽的选择框进行不同活动可视化大屏切换。

虽然，有点隐蔽，但是我感觉这个实现效果还是不错的。