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. 20155203 实验一《Java开发环境的熟悉》实验报告

    20155203 实验一<Java开发环境的熟悉>实验报告 一.实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 二.练 ...

  2. 20145209 实验二 《Java面向对象程序设计》 实验报告

    20145209 实验二 <Java面向对象程序设计> 实验报告 实验内容 1.初步掌握单元测试和TDD. 2.理解并掌握面向对象三要素:封装.继承.多态. 3.初步掌握UML建模. 4. ...

  3. iOS 中架构模式的浅显理解

    我们开发软件中应用各种模式,主要是为了 职责划分:一个类只做一件事 易用,可维护,方便扩展 解耦,相互独立,可单独测试 各种设计模式其实都是在解决上面的问题,让我们对比看看吧. 一.如何理解MVC设计 ...

  4. window + office 激活方法(不提供下载)

    下载KMSTools工具,里面集成了许多激活方法. WINDOWS KMS激活方式 比较简单,随便点一个KMSTools带有KMS字样的工具就可以了,但是KMS激活方式有效期为180天,到期需要继续激 ...

  5. 使用Git提交与管理代码

    要成为一个合格的码农,必须要有效对自己的代码进行管理,最近打算有空就整理一下自己以前写得代码,把不涉及实验室的机密的内容等放到github上,之前只知道git clone 别人的代码,希望有一天自己的 ...

  6. 数据库表,id自动递增重置,从1开始

    问题: 删除数据表的数据后,发现下次插入数据,主键id并没有重置,还是在原来基础上继续增加 解决: ; TRUNCATE table table_name; ; 参考: https://stackov ...

  7. PHP序列化serialize()和反序列化unserialize()

    所谓的序列化,就是把保存在内存中的各种对象状态或属性保存起来,在需要时可以还原出来. serialize() 可处理除了 resource 之外的任何类型返回字符串,此字符串包含了表示 value 的 ...

  8. JAVA学习笔记--初识容器类库

    一.前言 JAVA中一切皆为对象,因而,持有对象显得尤为重要. 在JAVA中,我们可以通过创建一个对象的引用的方式来持有对象: HoldingObject holding; 也可以创建一个对象数组来持 ...

  9. Docker入门与实践之 docker安装与了解

    一.Docker 概述 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后 ...

  10. 下载android sdk更新包离线安装解决方案

    本文转载自:http://xljboox.blog.163.com/blog/static/7628448320111159354738/ 第一次安装android sdk后进行开发包的更新,你应该了 ...