最近有需求需要同时查看指定的多个环境的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 之后就解决了,有点迷茫。