这篇文章主要介绍了通过ajax实现输入框文字改变展示下拉列表的效果,需要的朋友可以参考下LPWHTML5中文学习网 - HTML5先行者学习网
1.样式 LPWHTML5中文学习网 - HTML5先行者学习网
复制代码 代码如下:LPWHTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> LPWHTML5中文学习网 - HTML5先行者学习网
<!-- LPWHTML5中文学习网 - HTML5先行者学习网
body{background:#fff} LPWHTML5中文学习网 - HTML5先行者学习网
.Menu { LPWHTML5中文学习网 - HTML5先行者学习网
position:relative; LPWHTML5中文学习网 - HTML5先行者学习网
width:180px; LPWHTML5中文学习网 - HTML5先行者学习网
height:120px; LPWHTML5中文学习网 - HTML5先行者学习网
z-index:1; LPWHTML5中文学习网 - HTML5先行者学习网
background: #EEE; LPWHTML5中文学习网 - HTML5先行者学习网
border:1px solid #666; LPWHTML5中文学习网 - HTML5先行者学习网
margin-top:-100px; LPWHTML5中文学习网 - HTML5先行者学习网
display:none; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
.Menu2 { LPWHTML5中文学习网 - HTML5先行者学习网
position: absolute; LPWHTML5中文学习网 - HTML5先行者学习网
left:0; LPWHTML5中文学习网 - HTML5先行者学习网
top:0; LPWHTML5中文学习网 - HTML5先行者学习网
width:100%; LPWHTML5中文学习网 - HTML5先行者学习网
height:120px; LPWHTML5中文学习网 - HTML5先行者学习网
overflow:hidden; LPWHTML5中文学习网 - HTML5先行者学习网
z-index:1; LPWHTML5中文学习网 - HTML5先行者学习网
OVERFLOW-y:auto; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
.Menu2 ul{margin:0;padding:0} LPWHTML5中文学习网 - HTML5先行者学习网
.Menu2 ul li{width:100%;height:25px;line-height:20px;text-indent:15px; LPWHTML5中文学习网 - HTML5先行者学习网
border-bottom:1px dashed #999;color:#333;cursor:pointer; LPWHTML5中文学习网 - HTML5先行者学习网
change:expression( LPWHTML5中文学习网 - HTML5先行者学习网
this.onmouseover=function(){ LPWHTML5中文学习网 - HTML5先行者学习网
this.style.background=""; LPWHTML5中文学习网 - HTML5先行者学习网
}, LPWHTML5中文学习网 - HTML5先行者学习网
this.onmouseout=function(){ LPWHTML5中文学习网 - HTML5先行者学习网
this.style.background=""; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
) LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
input{width:120px} LPWHTML5中文学习网 - HTML5先行者学习网
#List1,#List2{left:0px;top:103px;} LPWHTML5中文学习网 - HTML5先行者学习网
--> LPWHTML5中文学习网 - HTML5先行者学习网
</style> LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
2. html脚本 LPWHTML5中文学习网 - HTML5先行者学习网
复制代码 代码如下:LPWHTML5中文学习网 - HTML5先行者学习网
........省略常规脚本 LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
<tr> LPWHTML5中文学习网 - HTML5先行者学习网
<th>汽车品牌名:</th> LPWHTML5中文学习网 - HTML5先行者学习网
<td> LPWHTML5中文学习网 - HTML5先行者学习网
<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');"/> LPWHTML5中文学习网 - HTML5先行者学习网
<input type="hidden" id="brandIdGeneral" name="brandIdGeneral" value="${*.brandIdGeneral}" style="width:180px" /> LPWHTML5中文学习网 - HTML5先行者学习网
<span class="required">必填*</span> LPWHTML5中文学习网 - HTML5先行者学习网
<div class="Menu" id="List1"> LPWHTML5中文学习网 - HTML5先行者学习网
<div class="Menu2" id="ListLi1"> LPWHTML5中文学习网 - HTML5先行者学习网
<%-- <ul>--%> LPWHTML5中文学习网 - HTML5先行者学习网
<%-- <li onmousedown="getValue('generalBrandName','宝马','brandIdGeneral','idx');showAndHide('List1','hide');LPWHTML5中文学习网 - HTML5先行者学习网
">宝马</li>--%> LPWHTML5中文学习网 - HTML5先行者学习网
<%-- <li onmousedown="getValue('generalBrandName','奥迪','brandIdGeneral','idx');showAndHide('List1','hide');"LPWHTML5中文学习网 - HTML5先行者学习网
>奥迪</li>--%> LPWHTML5中文学习网 - HTML5先行者学习网
<%-- </ul>--%> LPWHTML5中文学习网 - HTML5先行者学习网
</div> LPWHTML5中文学习网 - HTML5先行者学习网
</div> LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
</td> LPWHTML5中文学习网 - HTML5先行者学习网
</tr> LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
........省略常规脚本 LPWHTML5中文学习网 - HTML5先行者学习网
<tr> LPWHTML5中文学习网 - HTML5先行者学习网
<th>汽车厂商名:</th> LPWHTML5中文学习网 - HTML5先行者学习网
<td> LPWHTML5中文学习网 - HTML5先行者学习网
<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');" /> LPWHTML5中文学习网 - HTML5先行者学习网
<input type="hidden" id="brandId" name="brandId" value="${*.brandId}" style="width:180px" /> LPWHTML5中文学习网 - HTML5先行者学习网
<span class="required">必填*</span> LPWHTML5中文学习网 - HTML5先行者学习网
<div class="Menu" id="List2"> LPWHTML5中文学习网 - HTML5先行者学习网
<div class="Menu2" id="ListLi2"> LPWHTML5中文学习网 - HTML5先行者学习网
</div> LPWHTML5中文学习网 - HTML5先行者学习网
</div> LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
</td> LPWHTML5中文学习网 - HTML5先行者学习网
</tr> LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
3.通过JS来实现ajax异步请求 根据输入的内容过滤 LPWHTML5中文学习网 - HTML5先行者学习网
复制代码 代码如下:LPWHTML5中文学习网 - HTML5先行者学习网
//页面加载的时候 LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
jQuery(function($) { LPWHTML5中文学习网 - HTML5先行者学习网
if (navigator.userAgent.indexOf("MSIE") > 0) { LPWHTML5中文学习网 - HTML5先行者学习网
document.getElementById('generalBrandName').attachEvent("onPropertyChange", appendList); LPWHTML5中文学习网 - HTML5先行者学习网
document.getElementById('brandName').attachEvent("onPropertyChange", appendList); LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
else if (navigator.userAgent.indexOf("Firefox") > 0) { LPWHTML5中文学习网 - HTML5先行者学习网
document.getElementById('generalBrandName').addEventListener("input", appendList, false); LPWHTML5中文学习网 - HTML5先行者学习网
document.getElementById('brandName').addEventListener("input", appendList, false); LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
}); LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
//////// 预加载 LPWHTML5中文学习网 - HTML5先行者学习网
jQuery(function($) { LPWHTML5中文学习网 - HTML5先行者学习网
txtValue = $("#generalBrandName").val(); LPWHTML5中文学习网 - HTML5先行者学习网
//////// 给txtbox绑定键盘事件 LPWHTML5中文学习网 - HTML5先行者学习网
$("#generalBrandName").bind("keyup", function() { LPWHTML5中文学习网 - HTML5先行者学习网
var currentValue = $(this).val(); LPWHTML5中文学习网 - HTML5先行者学习网
if (currentValue != txtValue) { LPWHTML5中文学习网 - HTML5先行者学习网
appendList('List1',currentValue); LPWHTML5中文学习网 - HTML5先行者学习网
txtValue = currentValue; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
}); LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
txtValue = $("#brandName").val(); LPWHTML5中文学习网 - HTML5先行者学习网
//////// 给txtbox绑定键盘事件 LPWHTML5中文学习网 - HTML5先行者学习网
$("#brandName").bind("keyup", function() { LPWHTML5中文学习网 - HTML5先行者学习网
var currentValue = $(this).val(); LPWHTML5中文学习网 - HTML5先行者学习网
if (currentValue != txtValue) { LPWHTML5中文学习网 - HTML5先行者学习网
appendList('List2',currentValue); LPWHTML5中文学习网 - HTML5先行者学习网
txtValue = currentValue; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
}); LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
}); LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
//实现动态显示下拉列表内容的function LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
//根据输入框中的值来筛选obj中的值 LPWHTML5中文学习网 - HTML5先行者学习网
function appendList(obj,value){ LPWHTML5中文学习网 - HTML5先行者学习网
value = encodeURIComponent(value); value = encodeURIComponent(value); //两次使用encodeURI() LPWHTML5中文学习网 - HTML5先行者学习网
switch(obj){ LPWHTML5中文学习网 - HTML5先行者学习网
case "List1": //根据车品牌名来刷选List1中的值 LPWHTML5中文学习网 - HTML5先行者学习网
$.getJSON( LPWHTML5中文学习网 - HTML5先行者学习网
ctx + "/car/carmodel/**.do", LPWHTML5中文学习网 - HTML5先行者学习网
{keyWord : value, id : new Date().getTime()}, <!-- 产生一个时间戳,不让IE以为是相同的URL而使用cache --> LPWHTML5中文学习网 - HTML5先行者学习网
function (json) { LPWHTML5中文学习网 - HTML5先行者学习网
createLis('ListLi1',json); LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
); LPWHTML5中文学习网 - HTML5先行者学习网
break; LPWHTML5中文学习网 - HTML5先行者学习网
case "List2": //根据车厂商名来刷选List2中的值 LPWHTML5中文学习网 - HTML5先行者学习网
$.getJSON( LPWHTML5中文学习网 - HTML5先行者学习网
ctx + "/car/carmodel/**.do", LPWHTML5中文学习网 - HTML5先行者学习网
{keyWord : value, id : new Date().getTime()}, <!-- 产生一个时间戳,不让IE以为是相同的URL而使用cache --> LPWHTML5中文学习网 - HTML5先行者学习网
function (json) { LPWHTML5中文学习网 - HTML5先行者学习网
createLis('ListLi2',json); LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
); LPWHTML5中文学习网 - HTML5先行者学习网
break; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
function createLis(obj,json){ LPWHTML5中文学习网 - HTML5先行者学习网
switch(obj){ LPWHTML5中文学习网 - HTML5先行者学习网
case "ListLi1": //根据车品牌名来刷选List1中的值 LPWHTML5中文学习网 - HTML5先行者学习网
var executerDiv = document.getElementById(obj); //动态生成下拉列表框 LPWHTML5中文学习网 - HTML5先行者学习网
executerDiv.innerHTML=""; LPWHTML5中文学习网 - HTML5先行者学习网
var ul=document.createElement("ul"); LPWHTML5中文学习网 - HTML5先行者学习网
$.each(json, function (i, item) { LPWHTML5中文学习网 - HTML5先行者学习网
var li=document.createElement("li"); LPWHTML5中文学习网 - HTML5先行者学习网
var str = "getValue('generalBrandName','"+item.brandNameGeneral+"','brandIdGeneral','"+item.brandIdGeneral+"LPWHTML5中文学习网 - HTML5先行者学习网
');showAndHide('List1','hide')"; LPWHTML5中文学习网 - HTML5先行者学习网
li.setAttribute("onmousedown",str); LPWHTML5中文学习网 - HTML5先行者学习网
li.appendChild(document.createTextNode(item.brandNameGeneral)); LPWHTML5中文学习网 - HTML5先行者学习网
ul.appendChild(li); LPWHTML5中文学习网 - HTML5先行者学习网
}); LPWHTML5中文学习网 - HTML5先行者学习网
executerDiv.appendChild(ul); LPWHTML5中文学习网 - HTML5先行者学习网
break; LPWHTML5中文学习网 - HTML5先行者学习网
case "ListLi2": //根据车厂商名来刷选List2中的值 LPWHTML5中文学习网 - HTML5先行者学习网
var executerDiv = document.getElementById(obj); //动态生成下拉列表框 LPWHTML5中文学习网 - HTML5先行者学习网
executerDiv.innerHTML=""; LPWHTML5中文学习网 - HTML5先行者学习网
var ul=document.createElement("ul"); LPWHTML5中文学习网 - HTML5先行者学习网
$.each(json, function (i, item) { LPWHTML5中文学习网 - HTML5先行者学习网
var li=document.createElement("li"); LPWHTML5中文学习网 - HTML5先行者学习网
var str = "getValue('brandName','"+item.brandName+"','brandId','"+item.brandId+"');showAndHide('List1','hide')"; LPWHTML5中文学习网 - HTML5先行者学习网
li.setAttribute("onmousedown",str); LPWHTML5中文学习网 - HTML5先行者学习网
li.appendChild(document.createTextNode(item.brandName)); LPWHTML5中文学习网 - HTML5先行者学习网
ul.appendChild(li); LPWHTML5中文学习网 - HTML5先行者学习网
}); LPWHTML5中文学习网 - HTML5先行者学习网
executerDiv.appendChild(ul); LPWHTML5中文学习网 - HTML5先行者学习网
break; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
//显示或者隐藏层 LPWHTML5中文学习网 - HTML5先行者学习网
function showAndHide(obj,types){ LPWHTML5中文学习网 - HTML5先行者学习网
var Layer=window.document.getElementById(obj); LPWHTML5中文学习网 - HTML5先行者学习网
switch(types){ LPWHTML5中文学习网 - HTML5先行者学习网
case "show": LPWHTML5中文学习网 - HTML5先行者学习网
Layer.style.display="block"; LPWHTML5中文学习网 - HTML5先行者学习网
appendList(obj,''); LPWHTML5中文学习网 - HTML5先行者学习网
break; LPWHTML5中文学习网 - HTML5先行者学习网
case "hide": LPWHTML5中文学习网 - HTML5先行者学习网
Layer.style.display="none"; LPWHTML5中文学习网 - HTML5先行者学习网
break; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网
LPWHTML5中文学习网 - HTML5先行者学习网
//获取选中节点的内容 LPWHTML5中文学习网 - HTML5先行者学习网
function getValue(obj1,str,obj2,idx){ LPWHTML5中文学习网 - HTML5先行者学习网
var input=window.document.getElementById(obj1); LPWHTML5中文学习网 - HTML5先行者学习网
input.value=str; LPWHTML5中文学习网 - HTML5先行者学习网
var input=window.document.getElementById(obj2); LPWHTML5中文学习网 - HTML5先行者学习网
input.value=idx; LPWHTML5中文学习网 - HTML5先行者学习网
} LPWHTML5中文学习网 - HTML5先行者学习网