Ajax는 드롭다운 목록을 표시하기 위해 입력 상자의 텍스트를 변경하는 효과를 구현합니다.

이 글에서는 주로 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. 비동기 구현 입력 내용에 따라 JS Filter를 통한 ajax 요청

........省略常规脚本 
<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(&#39;List1&#39;,&#39;show&#39;);" onblur="showAndHide(&#39;List1&#39;,&#39;hide&#39;);"/> 
<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(&#39;generalBrandName&#39;,&#39;宝马&#39;,&#39;brandIdGeneral&#39;,&#39;idx&#39;);showAndHide(&#39;List1&#39;,&#39;hide&#39;);">宝马</li>--%> 
<%-- <li onmousedown="getValue(&#39;generalBrandName&#39;,&#39;奥迪&#39;,&#39;brandIdGeneral&#39;,&#39;idx&#39;);showAndHide(&#39;List1&#39;,&#39;hide&#39;);">奥迪</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(&#39;List2&#39;,&#39;show&#39;);" onblur="showAndHide(&#39;List2&#39;,&#39;hide&#39;);" /> 
<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>

4. 표시 효과

위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!

관련 권장 사항:

JQuery는 $.ajax 및 확인란을 사용하여 다음 부재 알림 기능을 구현합니다.

Ajax는 JS 코드를 통해 양식 요소 값을 자동으로 가져옵니다

위 내용은 Ajax는 드롭다운 목록을 표시하기 위해 입력 상자의 텍스트를 변경하는 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!