使用原生JavaScript实现部分表单元素

已于 2024-03-01 13:35:08 修改
阅读量660 收藏 15
点赞数 16
文章标签： javascript 前端 css html
于 2024-01-23 15:51:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68054161/article/details/135768994
版权
本文详细介绍了如何使用HTML、CSS和JavaScript实现下拉单选框和树形下拉菜单的效果，包括自定义样式和交互逻辑，以及通过DOM操作动态渲染选项。
摘要由CSDN通过智能技术生成

1.实现下拉单选框

实现效果如下：
在这里插入图片描述
实现代码如下：

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.test {
			width: 300px;
			height: 50px;
			margin: 20px;
		}

		/* 自定义组件 */
		.custom-select-container {
			width: 100%;
			height: 100%;
			font-size: inherit;
			position: relative;
		}

		.custom-select-container .custom-select-content {
			cursor: pointer;
			box-sizing: border-box;
			padding-left: 5%;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
		}

		.custom-select-container .custom-select-pop-up-box {
			display: none;
			width: 100%;
			height: 100%;
		}

		.custom-select-container .custom-select-pop-up-box ul {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}

		.custom-select-container .custom-select-pop-up-box li {
			cursor: pointer;
			list-style: none;
			box-sizing: border-box;
			padding-left: 5%;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			/* background-color: yellow; */
		}

		.custom-select-container .custom-select-pop-up-box li:hover {
			background-color: rgb(1, 122, 253);
		}

		.custom-select-container .custom-select-down-arrow {
			width: 10%;
			position: absolute;
			right: 5%;
			top: 50%;
			transform: translateY(-50%);
		}

		.custom-select-container .custom-select-border {
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			border: 0.05rem solid rgb(1, 122, 253);
			border-radius: 0.3rem;
			box-sizing: border-box;
			background-color: #fff;
		}
	</style>
</head>

<body>
	<div style="position: relative;" class="container">
		<div class="test">
			<div class="custom-select-container" style="z-index: 10;">
				<div class="custom-select-content">请选择地区</div>
				<div class="custom-select-pop-up-box"></div>
				<img src="./img/down-arrow.png" alt="箭头" class="custom-select-down-arrow" />
				<div class="custom-select-border"></div>
			</div>
		</div>
		<div class="test">
			<div class="custom-select-container" style="z-index: 9;">
				<div class="custom-select-content">请选择位置</div>
				<div class="custom-select-pop-up-box"></div>
				<img src="./img/down-arrow.png" alt="箭头" class="custom-select-down-arrow" />
				<div class="custom-select-border"></div>
			</div>
		</div>
	</div>

	<script>
		function renderCustomSelect(data = [], selectIndex = 0, label = 'name', value = 'value') {
			const customSelectContentObj = document.querySelectorAll('.custom-select-container .custom-select-content')[
				selectIndex];
			const customSelectPopUpBoxObj = document.querySelectorAll('.custom-select-container .custom-select-pop-up-box')[
				selectIndex];
			const customSelectDownArrowObj = document.querySelectorAll('.custom-select-container .custom-select-down-arrow')[
				selectIndex];
			const customSelectBorderObj = document.querySelectorAll('.custom-select-container .custom-select-border')[
				selectIndex];
			const ulObj = document.createElement('ul');

			customSelectPopUpBoxObj.appendChild(ulObj);
			for (let i = 0; i < data.length; i++) {
				let liObj = document.createElement('li');
				liObj.setAttribute('data-value', data[i][value]);
				liObj.innerText = data[i][label];
				ulObj.appendChild(liObj);
			}

			customSelectDownArrowObj.onclick = function () {
				console.log(customSelectPopUpBoxObj.style.display);
				if (customSelectPopUpBoxObj.style.display == 'none' || customSelectPopUpBoxObj.style.display == '') {
					customSelectPopUpBoxObj.style.display = 'block';
					customSelectBorderObj.style.height = `calc(100% * ${data.length + 1})`
					customSelectDownArrowObj.style.transform = 'translateY(-50%) rotate(180deg)'
				} else {
					customSelectPopUpBoxObj.style.display = 'none';
					customSelectBorderObj.style.height = '100%'
					customSelectDownArrowObj.style.transform = 'translateY(-50%) rotate(0deg)'
				}
			}

			customSelectContentObj.onclick = function () {
				if (customSelectPopUpBoxObj.style.display == 'none' || customSelectPopUpBoxObj.style.display == '') {
					customSelectPopUpBoxObj.style.display = 'block';
					customSelectBorderObj.style.height = `calc(100% * ${data.length + 1})`
					customSelectDownArrowObj.style.transform = 'translateY(-50%) rotate(180deg)'
				} else {
					customSelectPopUpBoxObj.style.display = 'none';
					customSelectBorderObj.style.height = '100%'
					customSelectDownArrowObj.style.transform = 'translateY(-50%) rotate(0deg)'
				}
			}

			let list = customSelectPopUpBoxObj.getElementsByTagName('li');
			for (let i = 0; i < list.length; i++) {
				list[i].onclick = function () {
					console.log(this.innerText, this.getAttribute('data-value'));
					customSelectContentObj.innerText = this.innerText;
					customSelectPopUpBoxObj.style.display = 'none';
					customSelectBorderObj.style.height = '100%';
					customSelectDownArrowObj.style.transform = 'translateY(-50%) rotate(0deg)'
				}
			}
		}

		renderCustomSelect([{
			name: '北京-1',
			value: '1'
		}, {
			name: '上海-2',
			value: '2'
		}, {
			name: '广州-3',
			value: '3'
		}, {
			name: '深圳-4',
			value: '4'
		}], 0)

		renderCustomSelect([{
			name: '上单-1',
			value: '1'
		}, {
			name: '中单-2',
			value: '2'
		}, {
			name: '打野-3',
			value: '3'
		}, {
			name: '射手-4',
			value: '4'
		}, {
			name: '辅助-5',
			value: '5'
		}], 1)
	</script>
</body>

</html>

2.实现树形下拉单选框

实现效果如下：
在这里插入图片描述

实现代码如下：

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.test {
			width: 300px;
			height: 30px;
			margin: 20px;
		}

		/* 自定义组件 */
		.custom-tree-select-container {
			width: 100%;
			height: 100%;
			font-size: inherit;
			position: relative;
		}

		.custom-tree-select-container .custom-tree-select-content {
			cursor: pointer;
			box-sizing: border-box;
			padding-left: 5%;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
		}

		.custom-tree-select-container .custom-tree-select-pop-up-box {
			display: none;
			width: 100%;
			height: 100%;
		}

		.custom-tree-select-container .custom-tree-select-pop-up-box .children-container {
			padding-left: 5%;
		}

		.custom-tree-select-container .custom-tree-select-pop-up-box .children-title {
			border-radius: 0.3rem;
			cursor: pointer;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.custom-tree-select-container .custom-tree-select-pop-up-box .children-title:hover {
			background-color: rgb(121, 182, 247);
		}

		.custom-tree-select-container .custom-tree-select-pop-up-box .children-title .children-title-down-arrow {
			width: 5%;
			padding: 0 5%;
			transform: rotate(270deg);
		}

		.custom-tree-select-container .custom-tree-select-pop-up-box .children-item {
			overflow: hidden;
		}

		.custom-tree-select-container .custom-tree-select-down-arrow {
			width: 5%;
			position: absolute;
			right: 5%;
			top: 50%;
			transform: translateY(-50%);
		}

		.custom-tree-select-container .custom-tree-select-border {
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			border: 0.05rem solid rgb(1, 122, 253);
			border-radius: 0.3rem;
			box-sizing: border-box;
			background-color: #fff;
		}
	</style>
</head>

<body>
	<div style="position: relative;" class="container">
		<div class="test">
			<div class="custom-tree-select-container" style="z-index: 10;">
				<div class="custom-tree-select-content">请选择地区</div>
				<div class="custom-tree-select-pop-up-box"></div>
				<img src="./img/down-arrow.png" alt="箭头" class="custom-tree-select-down-arrow" />
				<div class="custom-tree-select-border"></div>
			</div>
		</div>
	</div>

	<script>
		function renderCustomTreeSelect(data = [], selectIndex = 0, label = 'name', value = 'value', children = 'children',
			optionHeight = 30) {
			const customSelectContentObj = document.querySelectorAll(
				'.custom-tree-select-container .custom-tree-select-content')[
				selectIndex];
			const customSelectPopUpBoxObj = document.querySelectorAll(
				'.custom-tree-select-container .custom-tree-select-pop-up-box')[
				selectIndex];
			const customSelectDownArrowObj = document.querySelectorAll(
				'.custom-tree-select-container .custom-tree-select-down-arrow')[
				selectIndex];
			const customSelectBorderObj = document.querySelectorAll('.custom-tree-select-container .custom-tree-select-border')[
				selectIndex];

			// 渲染选项
			function addSelectOptionItem(root, arr) {
				const childrenContainerObj = document.createElement('div');
				childrenContainerObj.classList.add('children-container')
				root.appendChild(childrenContainerObj);
				for (let i = 0; i < arr.length; i++) {
					let childrenTitle = document.createElement('div');
					childrenTitle.style.height = optionHeight + 'px';
					childrenTitle.style.lineHeight = optionHeight + 'px';
					childrenTitle.style.paddingRight = '30px';
					childrenTitle.classList.add('children-title');
					childrenTitle.setAttribute('data-value', arr[i][value]);
					childrenTitle.innerText = arr[i][label];
					let childrenTitleDownArrow = document.createElement("img")
					childrenTitleDownArrow.src = './img/down-arrow.png';
					childrenTitleDownArrow.classList.add('children-title-down-arrow');
					let childrenItem = document.createElement('div');
					childrenItem.classList.add('children-item')
					childrenItem.appendChild(childrenTitle);
					childrenContainerObj.appendChild(childrenItem);
					if (arr[i][children] && arr[i][children].length !== 0) {
						childrenTitle.appendChild(childrenTitleDownArrow);
						childrenItem.style.height = optionHeight + 'px';
						childrenItem.classList.add('have-children');
						addSelectOptionItem(childrenItem, arr[i][children])
					} else { }
				}
			}
			addSelectOptionItem(customSelectPopUpBoxObj, data)

			// 点击选项，选择内容,子项展开关闭
			const childrenContainerObj = document.querySelectorAll('.custom-tree-select-container .children-container')[
				selectIndex];
			childrenContainerObj.style.maxHeight = '260px';
			childrenContainerObj.style.overflowY = 'auto';
			let list = customSelectPopUpBoxObj.querySelectorAll('.custom-tree-select-container .children-title');
			for (let i = 0; i < list.length; i++) {
				if (!list[i].parentElement.classList.contains('have-children')) {
					list[i].onclick = function (e) {
						console.log(this.innerText, this.getAttribute('data-value'));
						customSelectContentObj.innerText = this.innerText;
						customSelectPopUpBoxObj.style.display = 'none';
						customSelectBorderObj.style.height = '100%';
						customSelectDownArrowObj.style.transform = 'translateY(-50%) rotate(0deg)'
						e.stopPropagation();
					}
				} else {
					list[i].parentElement.onclick = function (e) {
						if (this.style.height === optionHeight + 'px') {
							this.style.height = 'auto';
							list[i]['children'][0].style.transform = 'rotate(360deg)'
							customSelectBorderObj.style.height = childrenContainerObj.clientHeight + optionHeight +
								'px';
							e.stopPropagation()
						} else {
							this.style.height = optionHeight + 'px';
							list[i]['children'][0].style.transform = 'rotate(270deg)';
							customSelectBorderObj.style.height = childrenContainerObj.clientHeight + optionHeight + 'px';
							e.stopPropagation()
						}
					}
				}
			}

			// 弹出选项框
			function optionBoxHandle() {
				console.log(customSelectPopUpBoxObj.style.display);
				if (customSelectPopUpBoxObj.style.display == 'none' || customSelectPopUpBoxObj.style.display == '') {
					customSelectPopUpBoxObj.style.display = 'block';
					customSelectBorderObj.style.height = childrenContainerObj.clientHeight + optionHeight + 'px';
					customSelectDownArrowObj.style.transform = 'translateY(-50%) rotate(180deg)'
				} else {
					customSelectPopUpBoxObj.style.display = 'none';
					customSelectBorderObj.style.height = '100%'
					customSelectDownArrowObj.style.transform = 'translateY(-50%) rotate(0deg)'
				}
			}
			customSelectDownArrowObj.onclick = optionBoxHandle;
			customSelectContentObj.onclick = optionBoxHandle;
		}

		renderCustomTreeSelect([
			{
				name: '亚洲-1',
				value: '1',
				children: [
					{
						name: '中国-1-1',
						value: '1-1',
						children: [
							{
								name: '北京-1-1-1',
								value: '1-1-1',
								children: [
									{
										name: '海淀-1-1-1-1',
										value: '1-1-1-1'
									},
									{
										name: '昌平-1-1-1-2',
										value: '1-1-1-2'
									}
								]
							},
							{
								name: '上海-1-1-2',
								value: '1-1-2',
								children: [
									{
										name: '徐汇-1-1-2-1',
										value: '1-1-2-1'
									},
									{
										name: '闵行-1-1-2-2',
										value: '1-1-2-2'
									}
								]
							}
						]
					},
					{
						name: '日本-1-2',
						value: '1-2'
					},
					{
						name: '韩国-1-3',
						value: '1-3'
					}
				]
			},
			{
				name: '欧洲-2',
				value: '2'
			},
			{
				name: '北美-3',
				value: '3',
				children: [
					{
						name: '美国-3-1',
						value: '3-1'
					}
				]
			}
		])
	</script>
</body>

</html>
Grover的账号
关注
使用原生javascript实现ajax提交form表单
StarXY的编程空间
04-16 1万+
使用原生javascript实现ajax提交form表单============================1准备表单        首先我们需要编写一个html代码，这里我是采用nodejs里面的jade模板引擎来进行生成html代码的。form(action=&amp;quot;/ajaxTest2&amp;quot;,method=&amp;quot;post&amp;quot;,enctype=&amp;quot;text/plain&amp;
原生JavaScript实现form表单序列化的方法
明月如霜丶
12-31 1203
当我们有form表单而且里面的表单元素较多时，咱们总不能一个个去获取表单元素内的值来进行拼接吧！这样会很让人蛋疼！为了方便与后台交互并且提高自己的开发效率，并且不让你蛋疼；我们一起用原生来写一个表单序列化方法： 先介绍一下jquery中有相应的表单序列化的方法： 1.serialize()方法 格式：var data = $(“form”).serialize(); 功能：将表单内容序列化成一个字...
JavaScript简单实现表单提交
weixin_44251179的博客
04-10 1266
JavaScript简单实现表单提交功能
JavaScript如何获取表单元素的值
L00H07Y02的博客
05-05 1069
JavaScript如何获取表单元素的值 1.通过元素的name获取 document.but.color.value;//pref表示form表单的name,color是表单中元素的名称 2.通过元素的index获取 document.pref.elements[0].value //表示name为pref表单中第一个元素的值 3.通过元素的id获取 document.getElementById("id").value; ...
原生js实现form表单提交
lbchenxy的博客
08-28 1万+
url为你要提交的地址 params 为你提交的参数 function fromPost(URL, PARAMS) { var temp = document.createElement("form"); temp.action = URL; temp.method = "pos...
原生JS实现表单验证（基于正则表达式）
qq_49900295的博客
04-12 1931
🙋在做这个表单之前我们先想看一下做出来的静态表单： 👏看一下大致的html结构： <div class="box"> <form action="" id="form-com"> <p class="main">姓名</p> <input type="text" placeholder="请输入姓名" id="main-in" class="test">
原生js实现获取form表单数据
热门推荐
u012841667的专栏
07-10 1万+
//获取指定form中的所有的<input>对象 function getElements(formId) { var form = document.getElementById(formId); var elements = new Array(); var tagElements = form.getElementsByTagName('input');
【实验小案例】原生JavaScript实现日历表
迷恋的博客
09-27 1533
原生JavaScript实现简易日历表的参考
原生js实现from表单验证
qq_34228805的博客
06-09 2514
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> <link rel="stylesheet" href="style.c..
原生javascript获取元素的几种方法
sinat_33775006的博客
06-13 3145
说明：日常开发中，我们常常遇到需要获取DOM对象，对对象元素进行修改情况，一般就会从Id、class、标签等去获取，下面就介绍几种方法，基本涵盖了所有的获取方法 方法简介： 1、通过ID获取（getElementById） 2、通过name属性（getElementsByName） 3、通过标签名（getElementsByTagName） 4、通过类名（getElementsByClassName） 5、通过选择器获取（querySelector、querySelectorAll） 具体说明： ...
使用原生javascript创建通用表单验证——更锋利的使用dom对象
10-28
原生JavaScript实现通用表单验证涉及的知识点包括： 1. DOM操作：文档对象模型（Document Object Model）是HTML和XML文档的编程接口，允许开发者使用JavaScript动态地读取和修改文档结构。DOM操作包括获取元素、...
原生JavaScript实现Ajax的方法
10-22
原生JavaScript实现Ajax主要依赖于XMLHttpRequest对象，以下将详细介绍如何使用原生JavaScript实现Ajax的基本方法。 首先，创建XMLHttpRequest对象是实现Ajax请求的基础。主流浏览器通过window.XMLHttpRequest属性...
原生JavaScript实现Ajax异步请求
10-18
要使用原生JavaScript实现Ajax，首先需要创建一个`XMLHttpRequest`对象，这是Ajax的核心。在所有支持Ajax的浏览器中，可以通过`new XMLHttpRequest()`来创建；而在老版本的IE浏览器中，我们需要使用`new ...
原生JavaScript实现的简单省市县三级联动功能示例
12-01
在本文中，我们将探讨如何使用原生JavaScript实现一个简单的省市县三级联动功能。这个功能常见于填写表单，特别是创建收货地址时。通过这种方式，用户可以方便地选择他们的所在地区。下面，我们将逐步解析代码并理解...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 878
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 417
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 582
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 323
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1167
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值