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 )的更多相关文章

  1. Jquery+json绑定带层次下拉框(select控件)

    一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...

  2. jQuery多选和单选下拉框插件select.js

    一.插件描述 可通过参数设置多选或者单选,多选返回数组结果,单选返回字符串,如图: 下载地址:https://pan.baidu.com/s/1JjVoK89_ueVVpfSlMDJwUQ   提取码 ...

  3. 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”

    接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...

  4. 雷林鹏分享:jQuery EasyUI 表单 - 格式化下拉框

    jQuery EasyUI 表单 - 格式化下拉框 本教程向您展示如何创建一个简单的下拉框(Combobox),让它在下拉框中显示图片项.您可以在下拉框(combobox)上使用 formatter ...

  5. 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  6. Asp.net绑定带层次下拉框(select控件)

    1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...

  7. 自制jquery可编辑的下拉框

    昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox ...

  8. jquery学习笔记:获取下拉框的值和下拉框的txt

    <div class="form-group"> <select class="form-control" id="iv_level ...

  9. html 可编辑的下拉框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 20155207JAVA第十二周课堂练习

    20155207JAVA第十二周课堂练习 教材代码检查--P98 修改教材P98 Score2.java, 让执行结果数组填充是自己的学号 Arrays和String单元测试 在IDEA中以TDD的方 ...

  2. 20155230 《Java程序设计》实验五 Java网络编程及安全

    20155230 <Java程序设计>实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 实验1 两人一组结对编程 ...

  3. 20155315 2016-2017-2 《Java程序设计》第四周学习总结

    教材学习内容总结 1.继承与多态 Java中只有单一继承,也就是只能有一个父类; 多态即指一个父类可由多个子类继承. 继承可以复用代码,更大的用处是实现「多态」. 封装是继承的基础,继承是多态的基础 ...

  4. Qt5.3.2 在MAC yosemite下编译出错 Could not resolve SDK path

    把Qt目录下面Users/Qt5.3.2/5.3/clang_64/mkspecs/qdevice.pri文件中的!host_build:QMAKE_MAC_SDK = macosx10.8改为!ho ...

  5. js插件实现一键复制功能

    clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能. 使用方法: 1. 下载 clipboard.js,并在页面中引入该插件.clipboard.js 下载地址: htt ...

  6. stl源码分析之list

    本文主要分析gcc4.8版本的stl list的源码实现,与vector的线性空间结构不同,list的节点是任意分散的,节点之间通过指针连接,好处是在任何位置插入删除元素都只需要常数时间,缺点是不能随 ...

  7. Http协议工作特点和工作原理笔记

    工作特点: (1)B/S结构(Browser/Server,浏览器/服务器模式) (2)无状态 (3)简单快速.可使用超文本传输协议.灵活运行传输各种类型 工作原理: 客户端发送请求浏览器 -> ...

  8. Linux目录与文件操作

    文件命名规则: 1.严格区分大小写: 2.长度不能超过255个字符: 3.不能使用/当文件名 mkdir:创建空目录 -p:parent,父目录,逐级创建 -v:verbose,打印详细信息 命令行展 ...

  9. 令自己的本地ip可以被外网访问

    https://www.ngrok.cc/_book/general/open.html

  10. 存储过程关于LOOP循环问题

    本随笔文章,由个人博客(鸟不拉屎)转移至博客园 发布时间: 2018 年 10 月 17 日 原地址:https://niaobulashi.com/archives/procedures_loop. ...