前台jsp：
<input type="text" name="bigCategoryName" id="bigCategoryName" AutoComplete="off"
value="${bigCategoryName}" style="width:150px" maxlength="20" list="second"
oninput="firstSel()"/>
<div style="display: none;">
<datalist id="second" ></datalist></div>
注意：AutoComplete="off"的作用是屏蔽掉浏览器本身的模糊匹配以前的输入记录，原来默认是on。
oninput=""要用oninput事件监测输入框实时输入数据。
<datalist>中的id与input标签中的list=“”绑定，用于显示ajax从后台获取的数据。
<div>标签主要是为了将datelist包裹并设置 style="display: none"隐藏属性。
js代码：
function firstSel() {//如果第一个下拉列表的值改变则调用此方法
var orderTypeName = $("#first").val();//得到第一个下拉列表的值
var url = "/XXX/xxx.do";
if(orderTypeName!=null && "" != orderTypeName&& -1 != orderTypeName){
//通过ajax传入后台，把orderTypeName数据传到后端
$.post(url,{orderTypeName:orderTypeName},
function(data){
var res = JSON.parse(data);
/* var res = $.parseJSON(data); *///把后台传回的json数据解析
var option;
$.each(res,function(i,n){//循环，i为下标从0开始，n为集合中对应的第i个对象
option += "<option value='"+n.smallCategoryName+"'>"+n.smallCategoryName+"</option>"
});
$("#second").html(option);//将循环拼接的字符串插入第二个下拉列表
$("#second").show();//把第二个下拉列表展示
});
}