//页面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>

jquery模拟可输入的下拉框的更多相关文章

  1. 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  2. js实现可输入的下拉框

    <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...

  3. 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  4. jquery学习笔记:获取下拉框的值和下拉框的txt

    <div class="form-group"> <select class="form-control" id="iv_level ...

  5. jquery美化select,自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  6. Jquery+json绑定带层次下拉框(select控件)

    一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...

  7. jquery动态生成的select下拉框,怎么设置默认的选中项?

    这两天都被这问题困扰,可能是我不太懂前端.我做layui表格行编辑,点击编辑按钮弹出layer,里边有一个民族的下拉框不能直接显示后台传过来的值.我把民族数组用jquery添加到了select里边,可 ...

  8. jQuery多选和单选下拉框插件select.js

    一.插件描述 可通过参数设置多选或者单选,多选返回数组结果,单选返回字符串,如图: 下载地址:https://pan.baidu.com/s/1JjVoK89_ueVVpfSlMDJwUQ   提取码 ...

  9. jquery 获取和设置 select下拉框的值(转手册)

    ##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...

随机推荐

  1. Ubuntu 安装软件和centos 对比命令

    之前都是使用Redhat 或者Centos 等rpm的linux  ,开始使用ubuntu 很不习惯 1.  安装命令Centos  : yum install httpd               ...

  2. 之前搭建的jenkins的一些笔记

    wget -O /etc/yum.repos.d/jenkins.repo http://jenkins-ci.org/redhat/jenkins.repo rpm --import http:// ...

  3. LINQ查询基础

    一.什么是LINQ LINQ是Language Integrate Query的缩写,意为语言集成查询,是微软在.Net Framework 4.5版中推出的主要特性之一. 它为开发人员提供了统一的数 ...

  4. 130.C++经典面试题 52-100

  5. CodeBlocks 配色方案

    搜索<colour_sets>,在</ACTIVE_LANG>下加入: 有几种经典方案,包括vim,desert,sublime,ulipad,oblivion,darkgra ...

  6. weex入门(一)

    emmmm其实没有接触过weex ,了解一番发现有很多坑,有很多基于weex改良后的框架,比如weexplus等等,基本不用踩多少坑.经过几天的深思熟虑我觉得还是去踩坑,毕竟踩完坑才能真正的了解嘛 w ...

  7. ES6学习笔记(三)字符串的扩展

    ES6 加强了对 Unicode 的支持,并且扩展了字符串对象. 1.字符的Unicode表示法 JavaScript 允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码 ...

  8. 【Henu ACM Round #13 D】A Trivial Problem

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 123...n中末尾0的个数 只会由素因子2和5的个数决定且等于 Min{cnt[2],cnt[5]} 且素因子2的个数一定会比5多 ...

  9. 【TC SRM 718 DIV 2 B】Reconstruct Graph

    [Link]: [Description] 给你两个括号序列; 让你把这两个括号序列合并起来 (得按顺序合并) 使得组成的新的序列为合法序列; 即每个括号都能匹配; 问有多少种合并的方法; [Solu ...

  10. SQL脚本存在TABLE ACCESS FULL行为

    对于SQL的执行计划,一般尽量避免TABLE ACCESS FULL的出现,那怎样去定位,系统里面哪些SQL脚本存在TABLE ACCESS FULL行为,对于9i及以后版本,使用以下语句即可 sel ...