div + css + Js 实现 select 多选列表完整实例

最新推荐文章于 2022-03-10 15:19:07 发布

xueshandugu

最新推荐文章于 2022-03-10 15:19:07 发布

阅读量710

点赞数

本文链接：https://blog.csdn.net/xueshandugu/article/details/23603177

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script>
// 缓存数组
var liId = [];

// 双击事件
function goBack()
{
//window.history.back()
for (var i = liId.length - 1; i >= 0; i--) {
document.getElementById(liId[i]).style.backgroundColor = "";
};

liId = [];
}//end goBack()

// 单击事件
function selectDemo(id){
var flagKey = "false";

document.οnkeyup=function() {
flagKey = "true";
if (event.keyCode==16) {
alert("您按了 shift 键了！此处做多选。");
}
};

if (flagKey == 'false') {
noKeySelectId(id);
};
//alert(liId.length);
}

// 非 shift键的选择
function noKeySelectId(id){
var containerId = document.getElementById(id);
containerId.style.backgroundColor = "RoyalBlue";

//已经选择过的再次选择时，需要将其过滤掉
var flag = filter(id);

// 没有被选中的选项，放入缓存数组
if (flag == 'false') {
liId.push(id);
};

}

// 将已经选择过的选项过滤掉
function filter(id){
var flag = "false";

for (var i = liId.length - 1; i >= 0; i--) {
if (id == liId[i]) {
document.getElementById(id).style.backgroundColor = "";
//删除在缓存数组中的指定元素
liId.splice(i,1);
flag = "true";
break;
};
};
return flag;
}

</script>


<style type="text/css">
#selectId{
color: red;
border-style: solid; border-width: 5px;
width: 300px;
/*width: 300px;*/
}
#selectId li {
padding-left: 10px;
line-height: 30px;
}
#selectId li:hover {
background-color:Khaki;
}
</style>
</head>
<body>

<input type="button" value="Back" οnclick="goBack()">
<div id="selectId">
<ul>
<li id="11" οnclick="selectDemo(11)" οndblclick="goBack()">张三</li>
<li id="22" οnclick="selectDemo(22)" οndblclick="goBack()">李四</li>
<li id="33" οnclick="selectDemo(33)">王五</li>
<li id="44" οnclick="selectDemo(44)">啊啊啊啊</li>
<li id="55" οnclick="selectDemo(55)">古古怪怪</li>
<li id="66" οnclick="selectDemo(66)">阿萨德发射点发</li>
<li id="77" οnclick="selectDemo(77)">几乎家家酒</li>
<li id="88" οnclick="selectDemo(88)">反反复复</li>
<li id="99" οnclick="selectDemo(99)">打火机</li>
<li id="100" οnclick="selectDemo(100)">拉开进攻</li>
</ul>
</div>
dddddddddddddddddddddddddddd
</body>
</html>