この記事では、ajax を使用して入力ボックスのテキストを変更し、ドロップダウン リストを表示する効果を主に紹介します。
1. HTML スクリプト
<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>
........省略常规脚本 <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>
以上がこの記事の全内容です。その他の関連コンテンツについては、ご注目ください。 PHP中国語ウェブサイトです!
JQueryは$.ajaxとチェックボックスを使用して次回不在通知機能を実装します
AjaxはJSコードを通じてフォーム要素の値を自動的に取得します
以上がAjax は、入力ボックスのテキストを変更してドロップダウン リストを表示する効果を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。