 
<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腳本

復(fù)制代碼代碼如下:

 
........省略常規(guī)腳本 

<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> 
<div class="Menu" id="List1"> 
<div 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>--%> 
</div> 
</div> 

</td> 
</tr> 

........省略常規(guī)腳本 
<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> 
<div class="Menu" id="List2"> 
<div class="Menu2" id="ListLi2"> 
</div> 
</div> 

</td> 
</tr> 

3.通過JS來實(shí)現(xiàn)ajax異步請求根據(jù)輸入的內(nèi)容過濾

復(fù)制代碼代碼如下:

 
//頁面加載的時(shí)候 

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); 
} 
}); 

//////// 預(yù)加載 
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; 
} 
}); 

}); 

//實(shí)現(xiàn)動態(tài)顯示下拉列表內(nèi)容的function 

//根據(jù)輸入框中的值來篩選obj中的值 
function appendList(obj,value){ 
value = encodeURIComponent(value); value = encodeURIComponent(value); //兩次使用encodeURI() 
switch(obj){ 
case "List1": //根據(jù)車品牌名來刷選List1中的值 
$.getJSON( 
ctx + "/car/carmodel/**.do", 
{keyWord : value, id : new Date().getTime()}, <!-- 產(chǎn)生一個(gè)時(shí)間戳，不讓IE以為是相同的URL而使用cache --> 
function (json) { 
createLis('ListLi1',json); 
} 
); 
break; 
case "List2": //根據(jù)車廠商名來刷選List2中的值 
$.getJSON( 
ctx + "/car/carmodel/**.do", 
{keyWord : value, id : new Date().getTime()}, <!-- 產(chǎn)生一個(gè)時(shí)間戳，不讓IE以為是相同的URL而使用cache --> 
function (json) { 
createLis('ListLi2',json); 
} 
); 
break; 
} 
} 

function createLis(obj,json){ 
switch(obj){ 
case "ListLi1": //根據(jù)車品牌名來刷選List1中的值 
var executerDiv = document.getElementById(obj); //動態(tài)生成下拉列表框 
executerDiv.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); 
}); 
executerDiv.appendChild(ul); 
break; 
case "ListLi2": //根據(jù)車廠商名來刷選List2中的值 
var executerDiv = document.getElementById(obj); //動態(tài)生成下拉列表框 
executerDiv.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); 
}); 
executerDiv.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; 
} 
} 

//獲取選中節(jié)點(diǎn)的內(nèi)容 
function getValue(obj1,str,obj2,idx){ 
var input=window.document.getElementById(obj1); 
input.value=str; 
var input=window.document.getElementById(obj2); 
input.value=idx; 
} 