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

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

JSP中的代码如下：

<select id="first" class="easyui-combobox" name="typeOne" style="width:200px;" οnchange="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(); }