jquery模拟可输入的下拉框
//页面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模拟可输入的下拉框的更多相关文章
- 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件
jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...
- js实现可输入的下拉框
<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> ...
- 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框
jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...
- jquery学习笔记:获取下拉框的值和下拉框的txt
<div class="form-group"> <select class="form-control" id="iv_level ...
- jquery美化select,自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
- Jquery+json绑定带层次下拉框(select控件)
一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...
- jquery动态生成的select下拉框,怎么设置默认的选中项?
这两天都被这问题困扰,可能是我不太懂前端.我做layui表格行编辑,点击编辑按钮弹出layer,里边有一个民族的下拉框不能直接显示后台传过来的值.我把民族数组用jquery添加到了select里边,可 ...
- jQuery多选和单选下拉框插件select.js
一.插件描述 可通过参数设置多选或者单选,多选返回数组结果,单选返回字符串,如图: 下载地址:https://pan.baidu.com/s/1JjVoK89_ueVVpfSlMDJwUQ 提取码 ...
- jquery 获取和设置 select下拉框的值(转手册)
##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...
随机推荐
- 对Jscript操作注册表接口的一点不解
作者:朱金灿 来源:http://blog.csdn.net/clever101 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作.Wshshell ...
- 日天的终生大事(dp)
日天的终生大事 题目描述 日天学长向妹子表白了,妹子说:“日天你那么聪明,回答我一个问题就答应你.你告诉我,L位K进制数有多少个?”日天表示这个问题太简单了,要求提高难度.妹子想了想说:“那么我增加一 ...
- [Chromium文档转载,第001章] Mojo Migration Guide
For Developers > Design Documents > Mojo > Mojo Migration Guide 目录 1 Summary 2 H ...
- visual studio 添加库文件
我在visual studio中使用OpenGL时需要添加额外的库 一 首先下载库文件,里面将会有一些.h文件和.lib文件,打开visual studio安装目录下打开: D:\program\VS ...
- python全栈_day01
计算机容量 1位 = 1bit 8bit = 1byte = 1字节 1024bytes = 1kbytes =1KB 1024个字符,小文档 ,几百k可以表示一张图片 1024KB ...
- pip版本及升级 pip安装指定模板
昨天在微信聊天,一妹子9点的时候告诉我她要看书了,让明天聊,瞬间自己心中那颗学习的种子燃烧起来,思来想去还是继续学习自己之前未学好的python吧,因为之前有了点点的python基础,所以本次打算从p ...
- Vert.x,一个异步、可伸缩、并发应用框架引发的思考
2012年听说过Vert.x这个框架之后,去年大致了解了下,最近开始进一步熟悉这个框架. Vert.x是一个用于下一代异步.可伸缩.并发应用的框架,旨在为JVM提供一个Node.js的替代方案.开发者 ...
- C++里的模板
1.泛型编程 --即实现一个通用的标准容器库. 所谓通用的标准容器库,就是要做到:比方List类存放全部肯恩类型的对象这样的事:泛型编程让你编写一个全然一般化并可反复使用的算法,其效率与针对某特定数 ...
- 65.Express---express-session
转自:https://blog.csdn.net/zhangweiwtmdbf/article/details/50723816 第一部分 session概述 1.1 session 是什么? Ses ...
- css相关用法
1. 2. 3.offset([coordinates]) 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整型属性:top 和 left,以像素计.此方法只对可见元素有效. a.获取当前元素的 ...