jquery模拟可输入的下拉框
2021-07-12 02:06
标签:split comment function select target com dex comm inpu jquery模拟可输入的下拉框 标签:split comment function select target com dex comm inpu 原文地址:http://www.cnblogs.com/liguangsunls/p/7083329.html//页面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
下一篇:JQuery学习笔记