前台jsp:
value="${bigCategoryName}" style="width:150px" maxlength="20" list="second"
οninput="firstSel()"/>
注意:AutoComplete="off"的作用是屏蔽掉浏览器本身的模糊匹配以前的输入记录,原来默认是on。
οninput=""要用oninput事件监测输入框实时输入数据。
中的id与input标签中的list=“”绑定,用于显示ajax从后台获取的数据。
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 += ""+n.smallCategoryName+""
});
$("#second").html(option);//将循环拼接的字符串插入第二个下拉列表
$("#second").show();//把第二个下拉列表展示
});
}