要实现的效果如下图:左边的一级下拉框选择改变的话,右边的二级下拉框的内容也会改变
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();
}