js下拉列表单选可多选，再次点击取消选中-事件委托-单独事件
事件委托处理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 200px;
margin: 20px auto;
}
#box {
width: 200px;
height: 30px;
line-height: 30px;
}
ul {
width: 200px;
list-style: none;
border: 1px solid #000000;
display: none;
}
ul>li:hover {
background-color: #0000FF;
color: #fff;
cursor: pointer;
}
.wrap ul .active {
background-color: orange;
color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function() {
//获取
var box = document.getElementById('box');
var ul = document.querySelector('.wrap ul');
var liS = document.querySelectorAll('.wrap ul>li');
var arr = [];
// console.log(box,ul,liS)
//显示隐藏
box.onclick = function(e) {
ul.style.display = 'block';
var ev = window.event || e;
//阻止事件冒泡
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
}
//选中 事件委托
ul.onclick = function(e) {
var ev = window.event || e;
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
//实际触发的元素
console.log(ev.target);
if (ev.target.nodeName == 'LI') {
// console.log(ev);
//判断是否按下功能键
if (ev.shiftKey == true) {
ev.target.className = 'active';
//再次点击，删除所选项
for (var i = 0; i < arr.length; i++) {
if (arr[i] == ev.target.innerText) {
//删除
arr.splice(i, 1);
ev.target.className = '';
// console.log(arr)
box.value = arr.join(',');
// box.value = arr.toString();转字符串也行
//终止运行
return false;
}
}
//添加
arr.push(ev.target.innerText);
// console.log(arr)
box.value = arr.join(',');
// box.value = arr.toString();转字符串也行
ul.style.display = 'block';
} else {
//清空
arr = [];
for (var i = 0; i < liS.length; i++) {
liS[i].className = '';
// ul.children[i].className = '';
}
ev.target.className = 'active';
arr.push(ev.target.innerText);
// console.log(arr)
box.value = arr[0];
ul.style.display = 'none';
}
}
}
//取消选中
document.onclick = function() {
ul.style.display = 'none';
arr = [];
}
}
</script>
</head>
<body>
<div class="wrap">
<input type="text" id="box" value="" />
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>css3</li>
<li>html5</li>
</ul>
</div>
</body>
</html>
单独添加事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
input {
width: 300px;
height: 30px;
;
display: block;
margin: 40px auto 0;
}
ul {
width: 300px;
margin: 0 auto;
border: 1px solid blue;
display: none;
}
ul li {
font: 20px/24px "Mircosoft YaHei"
}
ul li:hover {
background: #99CCFF;
}
</style>
<script>
window.onload = function () {
//1.获取元素
var oInp = document.querySelector('input');
var ul = document.querySelector('ul');
//2.点击input显示ul 点击其他地方 隐藏ul
oInp.onclick = function (e) {
ul.style.display = 'block';
//阻止冒泡
var ev = window.event || e;
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
}
document.onclick = function () {
ul.style.display = 'none';
}
//3.做多选和单选声明一个数组，用来接收被多选选中的li的内
//3.2.2 容
var arr = [];
//3.1给所有的li添加点击事件
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].onclick = function (e) {
var ev = window.event || e;
//3.2判断 是单选 还是 多选
//判断多选
if (ev.shiftKey == true) {
//多选效果
//3.2.1 ul不隐藏(阻止冒泡)
ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true;
//3.2.2 多选
//判断 如果当前li已经选中 再次点击 就不选中
for (var j = 0; j < arr.length; j++) {
if (this.innerText == arr[j]) {
//将arr中的这一项删除掉
arr.splice(j, 1);
oInp.value = arr.toString();
bgC();
return false; //如果已经选中，再次点击这一项 就删除这一项，并阻止后续代码执行
}
}
//如果没选中 就将当前li的内容追加到arr中
arr.push(this.innerText);
console.log(arr);
//将数组中的数组项转换为字符串 作为input的内容
//[1,2,3] '1,2,3'
oInp.value = arr.toString();
bgC();
} else {
//将input内容设置为选中的li的内容
oInp.value = this.innerText;
//改变li的背景色和字体
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].style.background = '';
ul.children[i].style.color = 'black';
}
this.style.background = 'orange';
this.style.color = 'white';
}
}
}
//封装函数来实现li背景色变化效果
function bgC() {
//干掉所有人
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].style.background = '';
ul.children[i].style.color = 'black';
}
//复活我们
//循环所有li 判断li的内容如果和arr中的某一个数组项一致，就证明这个里选中，就要设置背景色为橘色
for (var j = 0; j < ul.children.length; j++) {
for (var k = 0; k < arr.length; k++) {
if (ul.children[j].innerText == arr[k]) {
//证明这个li被选中
ul.children[j].style.background = 'orange';
ul.children[j].style.color = 'white';
}
}
}
}
}
</script>
</head>
<body>
<input type="text" />
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>css3</li>
<li>html5</li>
</ul>
</body>
</html>
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634776.html
