JavaScript 自定义下拉列表

以你之姓@ 2022-04-04 02:56 320阅读 0赞

![在这里插入图片描述][20181214144238491.png]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    :root {
    	--arrow-color: #999;
    }
    body>* {
    	margin-left: 1rem;
    }
    .select {
    	color: #999;
    	display: inline-block;
    }
    .select>div, .select>ul {
    	width: 18rem;
    	border-radius: .3rem;
    	border: 1px solid #ccc;
    	box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);
    	box-sizing: border-box;
    }
    .select>div {
    	position: relative;
    }
    .select>ul {
    	margin: 0;
    	margin-top: .3rem;
    	list-style: none;
    	padding: 0;
    	display: none;
    }
    .select>div, .select>ul>li {
    	line-height: 250%;
    	padding-left: .5rem;
    	padding-right: .5rem;
    }
    .select>ul>li:hover {
    	background-color: #0DC;
    	color: #fff;
    }
    /* 从父元素定义子元素的样式，比直接在子元素上定义类的样式优先级搞 */
    .select>div>div {
    	width: 1rem;
    	height: .45rem;
    	position: absolute;
    	right: .5rem;
    	top: 50%;
    	transform: translateY(-50%);
    	background-repeat: no-repeat;
    	
    }
    .arrow-bottom {
    	background-image: linear-gradient(135deg, transparent 30%, var(--arrow-color) 30%, var(--arrow-color) 40%, transparent 40%), linear-gradient(45deg, transparent 60%, var(--arrow-color) 60%, var(--arrow-color) 70%, transparent 70%);
    }
    .arrow-top {
    	background-image: linear-gradient(45deg, transparent 30%, var(--arrow-color) 30%, var(--arrow-color) 40%, transparent 40%), linear-gradient(135deg, transparent 60%, var(--arrow-color) 60%, var(--arrow-color) 70%, transparent 70%);
    }
    </style>
    <script>
    class CustomSelect {
    	constructor() {
    		const select = document.querySelector(".select");
    		//注意:div的firstChild是他的text，然后才是子节点
    		this.input = select.firstElementChild;
    		this.arrow = select.querySelector(".select>div>div");
    		this.list = select.children[1];
    		this.value = undefined;
    		this.setListener();
    	}
    	setListener() {
    		//如果采用这种方法，那么函数内部的this会被修改为触发事件的对象，而不是当前上下文
    		//this.input.onclick = this.changeExpandState;
    		this.input.onclick = ()=>{
    			this.changeExpandState();
    		}
    		for(let item of this.list.children) {
    			item.onclick = ()=>{
    				this.changeExpandState();
    				this.value = item.dataset.value;
    				this.input.firstChild.textContent = item.textContent;
    				console.log(this.value);
    			}
    		}
    	}
    	changeExpandState() {
    		//注意：.select>ul这种样式是定义在select元素里的，而不是ul，所以当去获取ul的该样式的时候会返回空
    		if(this.list.style.display === "none" || this.list.style.display === "") {
    			this.list.style.display = "block";
    			this.arrow.className = "arrow-top";
    		} else {
    			this.list.style.display = "none";
    			this.arrow.className = "arrow-bottom";
    		}
    	}
    }
    
    window.onload = ()=>{
    	new CustomSelect();
    }
    </script>
    </head>
    <body>
    <input type="text" list="urlList" name="text" />
    
    <datalist id="urlList">
    	<option label="@123456" value="123456">
    	<option label="@654321" value="654321">
    	<option label="@1314520" value="1314520">
    	<option value="77499981">77499981</option>
    </datalist>
    
    <select>
    	<option value="123456">@123456</option>
    	<option value="654321">@654321</option>
    	<option value="1314520">@1314520</option>
    	<option label="77499981" value="77499981">
    </select>
    
    <div class="select">
    	<div>Please select what you want
    		<div class="arrow-bottom"></div>
    	</div>
    	<ul>
    		<li data-value="123456">@123456</li>
    		<li data-value="654321">@654321</li>
    		<li data-value="1314520">@1314520</li>
    		<li data-value="77499981">@77499981</li>
    	</ul>
    </div>
    
    </body>
    </html>

[20181214144238491.png]: /images/20220404/3c7bf299451341bd911f173cdeb55278.png