JavaScript_JavaEE__让 select标签根据后台传入的数据选择默认值

最新推荐文章于 2022-03-27 21:45:22 发布

高达一号

最新推荐文章于 2022-03-27 21:45:22 发布

阅读量8.7k

点赞数 2

分类专栏： JavaScript应用文章标签： javascript select 标签

本文链接：https://blog.youkuaiyun.com/u010003835/article/details/50256899

版权

JavaScript应用专栏收录该内容

21 篇文章

订阅专栏

主要的javascript代码

重要事项；

1.javascript代码需要放置在 select标签之后，否则不起作用

2.后台的数据通过EL表达式获取

重要片段：

<script type="text/javascript">
	function jsSelectItemByValue(objSelect, objItemText) { 
	for (var i = 0; i < objSelect.options.length; i++) { 
		if (objSelect.options[i].value == objItemText) { 
			objSelect.options[i].selected = true; 
			break; 
			} 
		}
	}; 
	jsSelectItemByValue(document.forms['userForm'].sex, ${userEx.sex });
</script>

完整的 jsp 页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>修改用户信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
	src="<%=request.getContextPath() %>/resources/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>

	<form id="userForm" name="userForm"
		action="${pageContext.request.contextPath }/user/editUserSubmit.action"
		method="post">
		<input type="hidden" name="id" value="${userEx.id }" /> 修改用户信息：
		<table width="100%" border=1>
			<tr>
				<td>用户姓名</td>
				<td><input type="text" name="username"
					value="${userEx.username }" /></td>
			</tr>
			<tr>
				<td>生日</td>
				<td><input type="text" name="birthday"
					value="${userEx.birthday }"
					οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" /></td>
			</tr>
			<tr>
				<td>性别</td>
				<td>
				<select name="sex">
					 	<option value=""></option>
						<option value="1">男</option>
						<option value="2">女</option>
				</select>
				</td>
			</tr>
			<tr>
				<td>家庭住址</td>
				<td><input type="text" name="address"
					value="${userEx.address }"></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit" value="提交" />
				</td>
			</tr>
		</table>

	</form>
	<script type="text/javascript">
	function jsSelectItemByValue(objSelect, objItemText) { 
	for (var i = 0; i < objSelect.options.length; i++) { 
		if (objSelect.options[i].value == objItemText) { 
			objSelect.options[i].selected = true; 
			break; 
			} 
		}
	}; 
	jsSelectItemByValue(document.forms['userForm'].sex, ${userEx.sex });
	</script>
</body>

</html>