js中表单回显

最新推荐文章于 2024-03-12 20:21:49 发布

wangshiwen011

最新推荐文章于 2024-03-12 20:21:49 发布

阅读量3.7k

点赞数 2

分类专栏： js

本文链接：https://blog.csdn.net/wangshiwen011/article/details/90730727

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以下是关于js中表单回显的代码，涉及普通input标签，单选框，多选框，下拉框的回显操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="post">
			姓名：
			<input type="text" id="name" name="name" value="" /><br />

			性别：
			<input type="radio" name="sex" value="男" />男
			<input type="radio" name="sex" value="女" />女<br />

			密码：
			<input type="password" name="password" id="password" /><br />

			手机：
			<input type="text" name="phone" id="phone" /><br>

			爱好：
			<input type="checkbox" name="hobby" value="吃" />吃
			<input type="checkbox" name="hobby" value="喝" />喝
			<input type="checkbox" name="hobby" value="玩" />玩
			<input type="checkbox" name="hobby" value="睡" />睡<br />

			省份：
			<select name="省" id="sel">
				<option value="北京">北京</option>
				<option value="河南">河南</option>
				<option value="河北">河北</option>
			</select><br />

			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
			<button type="button" name="回显" onclick="huixian()">回显</button>
		</form>

		<script type="text/javascript">
			var t_user = {//设置用户属性
				name: 'zhangsan',
				sex: '男',
				pwd: '123456',
				phone: '13400000000',
				sheng: '河南',
				hobbys: '吃-玩-喝'
			}

			function huixian() {
				//回显姓名,密码,手机号(普通input标签)
				$("name").value = t_user.name;
				$('password').value = t_user.psd;
				$('phone').value = t_user.phone;
				
				//回显性别(单选框)
				var sexs = document.getElementsByName('sex');
				for (var i = 0; i < sexs.length; i++) {
					if (sexs[i].value == t_user.sex) {
						sexs[i].checked = true;
						break;
					}
				}

				//回显爱好(多选框)
				var t_hobby = t_user.hobbys.split('-');
				var hobbys = document.getElementsByName("hobby");
				for (var i = 0; i < hobbys.length; i++) {
					for (var j = 0; j < t_hobby.length; j++) {
						if (hobbys[i].value == t_hobby[j]) {
							hobbys[i].checked = true;
							continue;
						}
					}
				}

				//回显省(select下拉框)
				$('sel').value = t_user.sheng;

			}

			function $(id) { //通过name属性，获取标签对象
				return document.getElementById(id);
			}
		</script>

	</body>
</html>

wangshiwen011

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
js中表单回显

以下是关于js中表单回显的代码，涉及普通input标签，单选框，多选框，下拉框的回显操作：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form ac...
复制链接

扫一扫