动态二级下拉框联动（二级数据从数据库中获取）

最新推荐文章于 2026-05-13 23:33:46 发布

原创最新推荐文章于 2026-05-13 23:33:46 发布 · 2.9w 阅读

45 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jsp #jquery

二级联动专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JSP和JavaScript实现的联动下拉框功能。当一级下拉框（类型选择）发生变化时，二级下拉框会动态更新其内容。通过AJAX请求后端获取数据，并使用EasyUI组件完成前端展示。

要实现的效果如下图：左边的一级下拉框选择改变的话，右边的二级下拉框的内容也会改变

JSP中的代码如下：

<select id="first" class="easyui-combobox" name="typeOne"
			style="width:200px;" onchange="firstSel()">
			<option value="-1">请选择类型</option>
			<option value="订单类">订单类</option>
			<option value="贷款类">贷款类</option>
			<option value="预支类">预支类</option>
		</select> <select id="second" class="easyui-combobox" name="typeTwo"
			style="width:200px;">
			
		</select>

左边的下列选项框(id为first的select)我是写死的选项，如果你左边的也想用活的，可以先从数据库中取出来放入

然后js中的代码如下：（请自行导入jquery。。）

$(function() {
		$("#second").hide(); //初始化的时候第二个下拉列表隐藏
	});
	function firstSel() {//如果第一个下拉列表的值改变则调用此方法
		var orderTypeName = $("#first").val();//得到第一个下拉列表的值
		if(orderTypeName!=null && "" != orderTypeName&& -1 != orderTypeName){
				//通过ajax传入后台，把orderTypeName数据传到后端
			$.post("xxxx(你的url)",{orderTypeName:orderTypeName},function(data){
					var res = $.parseJSON(data);//把后台传回的json数据解析
					var option;
					$.each(res,function(i,n){//循环，i为下标从0开始，n为集合中对应的第i个对象
						option += "<option value='"+n.orderTypeId+"'>"+n.orderTypeSmall+"</option>"
					});
					$("#second").html(option);//将循环拼接的字符串插入第二个下拉列表
					$("#second").show();//把第二个下拉列表展示
			});
		
		}else {
			$("#second").hide();
		}
	};

后端就得到数据去数据库查出来然后把得到的数据通过json格式传回回调函数

简单的写一下....(导入fastJson的jar包)

     resp.setCharacterEncoding("UTF-8");//resp是HttpServletResponse对象
		PrintWriter out = null;
		try {
			out = resp.getWriter();
			out.print(JSON.toJSONString(content));
		} catch (IOException e) {
			e.printStackTrace();
		}