dynamic-drop-down-box.jsp

最新推荐文章于 2022-05-26 21:44:51 发布

原创最新推荐文章于 2022-05-26 21:44:51 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

js-flex 专栏收录该内容

103 篇文章

订阅专栏

本文介绍了一个Java Web应用程序中的下拉选择器实现案例，该案例使用了JSP技术来展示一个动态生成的学校列表，并通过JavaScript实现了列表的选择与页面跳转功能。此示例适用于了解如何在Java Web项目中集成前端选择器组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>

<head>
<!-- header -->
<%@ include file="/WEB-INF/views/include/header.jsp"%>
</head>
<body>
	<script type="text/javascript">
		try
		{
			ace.settings.check('main-container', 'fixed')
		}
		catch (e)
		{
			
		}
	</script>
	<div class="tableBody" align="center">
		<div style="border: 0px solid !important; margin: -10px;">
			<h6 style="margin-top: 10px; font: #797979;">
				<select name="zyxxlist" id="zyxxlist" style="border-radius: 5px; width: 500px">
					<c:forEach items="${repYjSchools}" var="zy">
						<option value="${zy.sysId}">${zy.xxmc}</option>
					</c:forEach>
				</select>
			</h6>

			<div id="NextTab" style="visibility: hidden">加载中...</div>
		</div>
	</div>

	<script type="text/javascript">
		var filter = ${filter};

		$('#zyxxlist').searchableSelect();

		$(document).ready(function()
		{
			var zyxxobj = $('#zyxxlist option');
			for (var i = 0; i < zyxxobj.length; i++)
			{
				if (zyxxobj[i].text == filter.title)
				{
					$("#zyxxlist ").get(0).options[i].selected = true;
				}
			}
		});

		//下拉框选择
		$('#zyxxlist').change(function()
		{
			var newurl = $('#zyxxlist option:selected').val();
			var nexttitle = $('#zyxxlist option:selected').text();
			var aNode = '<a id="aNextTab" href="<s:url value="/api/xxxxgs/viewDetail?schoolId=' + newurl + '"></s:url>">nextpageTab</a>';
			$('#NextTab').append(aNode);
			$('#aNextTab')[0].click();

		});
	</script>
</body>
</html>