1.样式
<style type="text/css"> <!-- body{background:#fff} .menu { position:relative; width:180px; height:120px; z-index:1; background: #eee; border:1px solid #666; margin-top:-100px; display:none; } .menu2 { position: absolute; left:0; top:0; width:100%; height:120px; overflow:hidden; z-index:1; overflow-y:auto; } .menu2 ul{margin:0;padding:0} .menu2 ul li{width:100%;height:25px;line-height:20px;text-indent:15px; border-bottom:1px dashed #999;color:#333;cursor:pointer; change:expression( this.onmouseover=function(){ this.style.background=""; }, this.onmouseout=function(){ this.style.background=""; } ) } input{width:120px} #list1,#list2{left:0px;top:103px;} --> </style>
2. html脚本
........省略常规脚本 <tr> <th>汽车品牌名：</th> <td> <input type="text" id="generalbrandname" name="generalbrandname" value="${*.generalbrandname}" style="width:180px" data-validation-engine="validate[required]" <c:if test="${!empty cartype.brandidgeneral}"> disabled="disabled" </c:if> onfocus="showandhide('list1','show');" onblur="showandhide('list1','hide');"/> <input type="hidden" id="brandidgeneral" name="brandidgeneral" value="${*.brandidgeneral}" style="width:180px" /> <span class="required">必填*</span> <p class="menu" id="list1"> <p class="menu2" id="listli1"> <%-- <ul>--%> <%-- <li onmousedown="getvalue('generalbrandname','宝马','brandidgeneral','idx');showandhide('list1','hide');">宝马</li>--%> <%-- <li onmousedown="getvalue('generalbrandname','奥迪','brandidgeneral','idx');showandhide('list1','hide');">奥迪</li>--%> <%-- </ul>--%> </p> </p> </td> </tr> ........省略常规脚本 <tr> <th>汽车厂商名：</th> <td> <input type="text" id="brandname" name="brandname" value="${*.brandname}" style="width:180px" data-validation-engine="validate[required]" <c:if test="${!empty cartype.brandid}"> disabled="disabled" </c:if> onfocus="showandhide('list2','show');" onblur="showandhide('list2','hide');" /> <input type="hidden" id="brandid" name="brandid" value="${*.brandid}" style="width:180px" /> <span class="required">必填*</span> <p class="menu" id="list2"> <p class="menu2" id="listli2"> </p> </p> </td> </tr>
3.通过js来实现ajax异步请求 根据输入的内容过滤
//页面加载的时候 jquery(function($) { if (navigator.useragent.indexof("msie") > 0) { document.getelementbyid('generalbrandname').attachevent("onpropertychange", appendlist); document.getelementbyid('brandname').attachevent("onpropertychange", appendlist); } else if (navigator.useragent.indexof("firefox") > 0) { document.getelementbyid('generalbrandname').addeventlistener("input", appendlist, false); document.getelementbyid('brandname').addeventlistener("input", appendlist, false); } }); //////// 预加载 jquery(function($) { txtvalue = $("#generalbrandname").val(); //////// 给txtbox绑定键盘事件 $("#generalbrandname").bind("keyup", function() { var currentvalue = $(this).val(); if (currentvalue != txtvalue) { appendlist('list1',currentvalue); txtvalue = currentvalue; } }); txtvalue = $("#brandname").val(); //////// 给txtbox绑定键盘事件 $("#brandname").bind("keyup", function() { var currentvalue = $(this).val(); if (currentvalue != txtvalue) { appendlist('list2',currentvalue); txtvalue = currentvalue; } }); }); //实现动态显示下拉列表内容的function //根据输入框中的值来筛选obj中的值 function appendlist(obj,value){ value = encodeuricomponent(value); value = encodeuricomponent(value); //两次使用encodeuri() switch(obj){ case "list1": //根据车品牌名来刷选list1中的值 $.getjson( ctx + "/car/carmodel/**.do", {keyword : value, id : new date().gettime()}, <!-- 产生一个时间戳，不让ie以为是相同的url而使用cache --> function (json) { createlis('listli1',json); } ); break; case "list2": //根据车厂商名来刷选list2中的值 $.getjson( ctx + "/car/carmodel/**.do", {keyword : value, id : new date().gettime()}, <!-- 产生一个时间戳，不让ie以为是相同的url而使用cache --> function (json) { createlis('listli2',json); } ); break; } } function createlis(obj,json){ switch(obj){ case "listli1": //根据车品牌名来刷选list1中的值 var executerp = document.getelementbyid(obj); //动态生成下拉列表框 executerp.innerhtml=""; var ul=document.createelement("ul"); $.each(json, function (i, item) { var li=document.createelement("li"); var str = "getvalue('generalbrandname','"+item.brandnamegeneral+"','brandidgeneral','"+item.brandidgeneral+"');showandhide('list1','hide')"; li.setattribute("onmousedown",str); li.appendchild(document.createtextnode(item.brandnamegeneral)); ul.appendchild(li); }); executerp.appendchild(ul); break; case "listli2": //根据车厂商名来刷选list2中的值 var executerp = document.getelementbyid(obj); //动态生成下拉列表框 executerp.innerhtml=""; var ul=document.createelement("ul"); $.each(json, function (i, item) { var li=document.createelement("li"); var str = "getvalue('brandname','"+item.brandname+"','brandid','"+item.brandid+"');showandhide('list1','hide')"; li.setattribute("onmousedown",str); li.appendchild(document.createtextnode(item.brandname)); ul.appendchild(li); }); executerp.appendchild(ul); break; } } //显示或者隐藏层 function showandhide(obj,types){ var layer=window.document.getelementbyid(obj); switch(types){ case "show": layer.style.display="block"; appendlist(obj,''); break; case "hide": layer.style.display="none"; break; } } //获取选中节点的内容 function getvalue(obj1,str,obj2,idx){ var input=window.document.getelementbyid(obj1); input.value=str; var input=window.document.getelementbyid(obj2); input.value=idx; }
4.展示效果
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
jquery使用$.ajax和checkbox实现下次不在通知功能
ajax中通过js代码自动获取表单元素值
以上就是ajax实现输入框文字改变展示下拉列表的效果的详细内容。