//页面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. php中局部变量和全局变量

    php中局部变量和全局变量 代码1:函数内部使用函数外部变量错误方法 <?php $name = 'fish'; function animal() { echo $name; } animal ...

  2. mysql日期函数及批量循环返回主键ID

    实际项目中总是会遇到各种时间计算查询等等许多时候是特别麻烦前阵子公司有个需求大致是要查询当前日期与数据库存储日期之差,本来写了个工具类调用的但是最后觉得这样不好就想着能不能用函数解决,没想到还真有这里 ...

  3. idea中实现类快速重写service方法 快捷键

    1.在实现类中 CTRL+O 快捷键,会弹出所有方法 2.选择service中的方法,会自动重写

  4. Vijos——T1406 拉力赛

    https://vijos.org/p/1460 描述 车展结束后,游乐园决定举办一次盛大的山道拉力赛,平平和韵韵自然也要来参加大赛. 赛场上共有n个连通的计时点,n-1条赛道(构成了一棵树).每个计 ...

  5. 在resin配置參数实现JConsole远程监控JVM

    在Resin配置參数实现JConsole远程监控JVM 在Resin中配置中配置下列參数,就能够是实现了! <jvm-arg>-Dcom.sun.management.jmxremote& ...

  6. atitit.jndi的架构与原理以及资源配置and单元測试实践

    atitit.jndi的架构与原理以及资源配置and单元測试实践 1. jndi架构 1 2. jndi实现原理 3 3. jndi资源配置 3 3.1. resin  <database> ...

  7. 从头认识Spring-2.4 基于java的标准注解装配-@Inject(2)-通过set方法或者其它方法注入

    这一章节我们来讨论一下基于java的标准注解装配标签@Inject是如何通过通过set方法或者其它方法注入? 在使用@Inject标签之前.我们须要在pom文件中面增加以下的代码: <depen ...

  8. ble_app_hrs心率程序 nrf51822

    所用程序为: H:\keil\ARM\Device\Nordic\nrf51822\Board\pca10001\s110\ble_app_hrs 上面的路径是安装sdk之后生成在keil软件所在目录 ...

  9. 用Vue+axios写一个实时搜索

    刚刚在学vue,试着写了一个实时搜索文件. 思路:1.input 通过v-model绑定.2.通过watch检测输入结果变化.3根据结果变化从api调用不同的数据. 代码如下: <!DOCTYP ...

  10. 【DRF分页】

    目录 第一种 PageNumberPagination 查第n页,每页显示n条数据 第二种 LimitOffsetPagination 在第n个位置,向后查n条数据 第三种 CursorPaginat ...