ajax实现输入框文字改变展示下拉列表的效果示例实现输入框文字改变展示下拉列表的效果示例
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>
<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>
……..省略常规脚本
<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’);” />