实现下拉复选框

最近有需求需要同时查看指定的多个环境的CPU、内存资源占用情况，又不能一次性把所有环境的数据都返回，就得实现一个下拉复选框。最终实现的效果是这样子的：

本质上也不能说是下拉复选框吧，其实就是一开始实现了一个下拉列表，在单击 select 框的时候显示、隐藏。

CSS：

#select{

    width: 100px;

    height: 20px;

    position: relative;

    top: 10px;
    
    right: 10px;

    }

 #list{

    width: 100px;

    height: 20px;

    position: relative;

    top: 10px;

    right: 10px;

   }

HTML：

<select id="select"></select>
<div id="list">
    <ul>
    	{% for node in node_cpu_list %}
        	<li><input type="checkbox" value={{ node }}>{{ node }}</li>
        {% endfor %}
    </ul>
    <button id="nodecpu" onclick="monitor_type()">确定</button>
</div>

JavaScript：

<script type="text/javascript">
	
	var arr = [];
    $(function () {
        $('#list').hide();
    })
    //使用 toggle 方法切换 hide() 和 show() 方法
    $('#select').click(function () {
        $('#list').toggle();
    })
    $("input").change(function () {
        if ($(this).prop("checked")) {
            arr.push($(this).val());
        } else {
        	let i = arr.indexOf(value);
        	arr.splice(i, 1);
        }
    })
    //点击确定按钮调用 monitor_type 函数
	function monitor_type(){
			console.log(arr);
		}
	</script>

过程中还遇到了一个很奇怪的问题，当我把 list 设置成 absolute 的时候，点击完一次确定按钮之后就没办法取消复选框了，改成 relative 之后就解决了，有点迷茫。