//頁面html <div id="select" class="select" ><ul><c:forEach items="${movieCityList}" var="cy" varStatus="st"><li><a href="javascript:void(0)" onclick="selectOption($(this))">${cy.cityName}</a><input style="display: none;" name="cityCode" id="cityCode${st.count }" value="${cy.vasCityId}"/></li></c:forEach></ul></div> //jquery代碼 <script type="text/javascript">//城市下拉框函數function getData(){//獲取全部城市數據var data=new Array();$(".select a").each(function(i){data[i]=$(this).html();});return data;}function judgeLength(l){//依據結果顯示下拉框高度if(l>5){$(".select").css("height","100px");}else{$(".select").css("height",l*20+"px");}}function selectOption(obj){//選中$("#cityName").val(obj.html());$("#cityId").val(obj.next("input").val());$(".select").hide();loadCinemalName();}function onFocus(){//input標簽獲取焦點var l=getData().length;if($('#cityName').val()==''){judgeLength(l);$(".select").show();}else{var obj=$("#cityName");onKeyUp(obj);}}function onKeyUp(obj){//input keyup事件var input=obj.val()+'';$(".select li").hide();var height=0; var data=getData();var l=getData().length;if(input!=''){//輸入時動態檢索是否存在所輸入的城市for(var i=0;i<data.length;i++){var str=data[i]+"";if(str.indexOf(input)!=-1){height++;judgeLength(height);$(".select").show();$(".select li:eq("+i+")").show();var cityId=$(".select li:eq("+i+") input").val();$("#cityId").val(cityId);}}loadCinemalName();}else{judgeLength(l);$(".select li").show();}}function onBlur(e){//失去焦點時隱藏下拉框alert(e.target);//$(".select").hide();}</script>

轉載于:https://www.cnblogs.com/liguangsunls/p/7083329.html

總結

以上是生活随笔為你收集整理的jquery模拟可输入的下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。