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 ...
随机推荐
- UVALive - 6269 Digital Clock 模拟
UVALive - 6269 Digital Clock 题意:时钟坏了,给你一段连续的时间,问你现在可能的时间是多少. 思路:直接模拟,他妈的居然这场就跪在了这题,卧槽,他妈的就在111行,居然多打 ...
- vsphere平台windows虚拟机克隆的小插曲(无法登陆系统)
问题: 1.克隆完windows虚拟化后输入法乱码. 2.开启远程的情况下远程登录输入正确的密码也无法登录. 解决: 1.更改管理员用户密码(不输入原win7密码更改win7密码). 2.重新启用管理 ...
- Ubuntu 16.04 实现有线 无线同时用
因为工作的原因,经常会用有线网卡连接服务器进行配置,无线网卡上外网. 一.查看当前网关信息 pipci@ubuntu:~$ ip route showdefault via 192.168.2.1 d ...
- 【VC++学习笔记三】控件自绘
MFC应用程序中,大部分的控件类型都已经被定制好了,即便是修改,也只是小范围内的修改,而很多情况下,我们又需要对界面进行特殊定制,这时,最好的办法就是用CWnd类进行派生,自己生成新的窗体,在WM_P ...
- 【J2EE】在项目中理解J2EE规范
J2EE平台由一整套服务(Service),应用程序接口(API)和协议构成,它对开发企业级应用提供了功能支持.13个核心技术各自是JDBC, JNDI, EJB, RMI, JSP ...
- [Python] Python Libs
The Python Standard Library has a lot of modules! To help you get familiar with what's available, he ...
- vue (v-if show 问题)
vue中的显示和隐藏有两种方式 1.v-if ( 相当于动态创建的标签,在html 结构中,是不存在的. ) 2. v-show(控制的是 html 的css display:none 属性.结 ...
- 关于EM的理解
任意浏览器的默认字体高度16px(16像素). 所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的 ...
- Spark MLlib协同过滤算法
算法说明 协同过滤(Collaborative Filtering,简称CF,WIKI上的定义是:简单来说是利用某个兴趣相投.拥有共同经验之群体的喜好来推荐感兴趣的资讯给使用者,个人透过合作的机制给予 ...
- 洛谷P2115 [USACO14MAR]破坏Sabotage
题目描述 Farmer John's arch-nemesis, Farmer Paul, has decided to sabotage Farmer John's milking equipmen ...