js下拉列表单选可多选，再次点击取消选中-事件委托-单独事件

最新推荐文章于 2024-05-03 11:47:20 发布

JackieDYH

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量765

点赞数 1

分类专栏： JavaScript 文章标签：下拉列表点击取消选中多选单选 javascript

本文链接：https://blog.csdn.net/JackieDYH/article/details/105397584

版权

JavaScript 专栏收录该内容

350 篇文章 53 订阅

订阅专栏

事件委托处理：

<!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

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js下拉列表单选可多选，再次点击取消选中-事件委托-单独事件

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .wrap { ...
复制链接

扫一扫