//页面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. 剑指offer—java版本实现

    终于完成了全部!所有的心累这时候都觉得很值得啊!爽! https://github.com/xurui1995/Sword-pointing-to-offer

  2. 机器学习(三) Jupyter Notebook, numpy和matplotlib的详细使用 (下)

    七.Numpy中的矩阵运算 八.Numpy中的聚合运算 九.Numpy中的arg运算 十.Numpy中的比较和Fancy Indexing 十一.Matplotlib数据可视化基础 十二.数据加载和简 ...

  3. React开发实时聊天招聘工具 -第二章

    2-1 介绍React开发环境 npm install -g create-react-app xxx npm run eject   来配置webpack 2-2 ES6常用语法 其他 还有一些特性 ...

  4. R与并行计算

    本文在Creative Commons许可证下发布 什么是并行计算? 并行计算,准确地说应该包括高性能计算机和并行软件两个方面.不过,近年来随着个人PC机,廉价机群,以及各种加速卡(NVIDIA GP ...

  5. 【Uva 1631】Locker

    [Link]: [Description] 有一个n(n≤1000)位密码锁,每位都是0-9,可以循环旋转.每次可以让1-3个相邻 数字同时往上或者往下转一格.例如,567890->567901 ...

  6. 【Codeforces Round #425 (Div. 2) B】Petya and Exam

    [Link]:http://codeforces.com/contest/832/problem/B [Description] *能代替一个字符串(由坏字母组成); ?能代替单个字符(由好字母组成) ...

  7. IntelliJ IDEA 详细图解最常用的配置 ,适合刚刚用的新人。(转)

    IntelliJ IDEA使用教程 (总目录篇) 刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工. 比如:设置文件字体大小,代码自动完成提示,版本管理 ...

  8. bzoj1084【SCOI2005】最大子矩阵

    1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 1946  Solved: 970 [Submit][id ...

  9. vim 基础学习之global

    global命令可以在指定模式下,匹配行上进行Ex命令 使用格式: :[range]g[lobal]/{pattern}/[cmd] range-是执行范围(如果缺省,是%) global-命令关键字 ...

  10. vim-进入插入模式快捷键

    vim中有一些命令,是同时包含有大小写两种的.现在就集中测试下他们的区别:     1.A 跟a A-光标所在行的末尾插入 a-光标后插入 2.I 跟i I-光标所在行的非空字符前插入 i-光标前位置 ...