jquery实现可编辑的下拉框( input + select )
HTML:
<input id="inputModel" />
<select name="EngineModel" size="10" style="height: auto; margin-left: 120px; position: absolute; display: none;"></select>
Jquery:
//获取select
var engine = $('select[name="EngineModel"]');
//页面加载,初始赋值select选项
$.get('engines.aspx', function (engineModels) {
engines = eval(engineModels);
for (var i = 0; i < engines.length; i++) {
engine.append('<option>' + engines[i].Model + '</option>');
}
})
//for (var i in engines) {
// engine.append('<option>' + engines[i] + '</option>');
// } //绑定值至select(可用于修改)
if ('<%=order.EngineModel%>') {
engine.val('<%=order.EngineModel%>');
} //select的change事件,选中的值赋给input
$('input[name="EngineModel"]').change(function() {
document.getElementById('inputModel').value = document.getElementById('SelectModel').options[document.getElementById('SelectModel').selectedIndex].value;
}) //可编辑select具体实现
var focus = false;
$("#inputModel").focus(function () {
focus = true;
$(this).next().css('display', 'block');
}).blur(function () {
if (focus) {
$(this).next().css('display', 'none');
}
}).keyup(function () {
var queryCondition = $("#inputModel").val().toLowerCase();
if (queryCondition.length != 0) {
engine.empty();
for (var i in engines) {
if (engines[i].toLowerCase().indexOf(queryCondition) != -1) {
engine.append('<option>' + engines[i] + '</option>');
}
}
} else {
for (var i in engines) {
engine.append('<option>' + engines[i] + '</option>');
}
}
}).next().mousedown(function () {
focus = false;
}).change(function () {
$(this).css('display', 'none').prev().val(this.value);
});
jquery实现可编辑的下拉框( input + select )的更多相关文章
- Jquery+json绑定带层次下拉框(select控件)
一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...
- jQuery多选和单选下拉框插件select.js
一.插件描述 可通过参数设置多选或者单选,多选返回数组结果,单选返回字符串,如图: 下载地址:https://pan.baidu.com/s/1JjVoK89_ueVVpfSlMDJwUQ 提取码 ...
- 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
- 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框
jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...
- 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件
jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...
- Asp.net绑定带层次下拉框(select控件)
1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...
- 自制jquery可编辑的下拉框
昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox ...
- jquery学习笔记:获取下拉框的值和下拉框的txt
<div class="form-group"> <select class="form-control" id="iv_level ...
- html 可编辑的下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 2016-2017-2 《Java程序设计》第二周学习总结
20155319 2016-2017-2 <Java程序设计>第二周学习总结 课堂学习内容 git:版本控制 java -d bin(当地文件夹) src/Hello.java把生成的.c ...
- 20155336 2016-2017-2 《Java程序设计》第三周学习总结
20155336 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 第四章 类与对象 定义: 对象(Object):存在的具体实体,具有明确的状态和行为. 类( ...
- 20145209 实验四 《android开发基础》 实验报告
20145209 实验四 <android开发基础> 实验报告 实验内容 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBI ...
- docker容器的启动、停止、运行、导入、导出、删除
原文:docker容器的启动.停止.运行.导入.导出.删除 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/jiang425776024/articl ...
- Tomcat设置是否可以上传文件到服务器
今天,我做的一个点菜项目要求做一个添加菜品,把菜品的路径保存进数据库,然后将菜品的图片保存进tomcat相应的目录中. 一开始,我在客户端写的代码是直接向tomcat的目录写文件,但是会出现403错误 ...
- 【转载】DXUT进阶
原文:DXUT进阶 概要 这个指南涵盖了更多DXUT的高级应用. 这个指南里的大部分功能是可选的, 为了以最小的代价来增强你的应用程序. DXUT提供了一个简单的基于GUI系统的精灵和一个设备设置对话 ...
- Ceph学习之路(二)之Ceph的工作原理及流程
一.RADOS的对象寻址 Ceph 存储集群从 Ceph 客户端接收数据——不管是来自 Ceph 块设备. Ceph 对象存储. Ceph 文件系统.还是基于 librados 的自定义实现——并存储 ...
- zedboard学习(1)OLED驱动显示图像
1. 干点啥?驱动一下上面的屏吧 2. 找个代码研究一下,cat命令用于读取文件(普通文件或设备文件)的内容并进行输出.据说板子已经做好OLED的驱动了,驱动映射为/dev/zed_oled,所以直接 ...
- angular promise $q 异步调用
Angular异步调用 Promise和$q的用法 背景 首先说明一下promise异步调用出现的背景: javascript语言是一种单线程模式,就是说一次只能够执行一个任务,如果有多个任务的话就必 ...
- python基础数据类型补充
python_day_7 一. 今日主要内容: 1. 补充基础数据类型的相关知识点 str. join() 把列表变成字符串 列表不能再循环的时候删除. 因为索引会跟着改变 字典也不能直接循环删除.把 ...