jQuery(2)——如何使用jQuery回显数据

使用jQuery回显数据


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
pageContext.setAttribute("userName","Tom");
pageContext.setAttribute("sex","1");
pageContext.setAttribute("hobbies","1,3");
pageContext.setAttribute("grade","2");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Insert title here</title>
		<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			<!--
				$(function(){});匿名函数里面的代码会在整个页面加载完才会执行
			-->
			$(function(){
				$("#user_name").val("${userName}");
				const hobbies="${hobbbies}";
				$("[name='hobby']").val( hobbies.split(","));
				$("[name='sex']").val(["${sex}"]);
				$("[name='grade']").val(["${grade}"]);
			});
		</script>
	</head>
	<body>
		<form>
			<!--
				1、文本框的数据可以直接写${返回数据名 }——>${userName }
				2、也可以通过jQuery对象或得——>$("#user_name").val("${userName}")
			-->
			<input id="user_name" value="${userName }"/> 
		
			<input type="radio" name="sex" value="0"/> 男
			<input type="radio" name="sex" value="1"/> 女
				
			<input type="checkbox" name="hobby" value="1"/> 足球
			<input type="checkbox" name="hobby" value="2"/> 篮球
			<input type="checkbox" name="hobby" value="3"/> 乒乓球
			
			<select class="abc" name="grade"> 
				<option value="1">一年级</option>
				<option value="2">二年级</option>
			</select>
		</form>
		
		<!--如果执行此处代码,他在form表单加载结束后才执行 -->
		<!--  script type="text/javascript">
			
			$("#user_name").val("${userName}");
			
			//回显复选框数据
			const hobbies="${hobbbies}";
			$("[name='hobby']").val( hobbies.split(","));
			
			//回显单选框数据
			$("[name='sex']").val(["${sex}"]);
			
			//回显下拉框数据
			$("[name='grade']").val(["${grade}"]);
			
		</script> -->
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_42867975/article/details/98072406
今日推荐