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. 20155325《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    实验一Java开发环境的熟悉-1 提交 Linux或Window或macOS中命令行下运行Java的截图 运行结果包含自己学号等证明自己身份的信息 实验一Java开发环境的熟悉-2 提交 Linux或 ...

  2. asp.net self host and urlacl(解决UnHandledException Message:拒绝访问的问题)

    命令提示符(管理员权限)需要添加的代码: netsh http add urlacl url=http://*:9999/ user=Everyone listen=yes 其中: url:代码中的u ...

  3. bzoj1854 [Scoi2010]游戏 ([SCOI2010]连续攻击游戏)

    bzoj1854 [Scoi2010]游戏 ([SCOI2010]连续攻击游戏) 据说正解是并查集???我不会 这不是一道匈♂牙利好题吗??? 一个装备的两个属性都向它连边,然后跑一遍匈♂牙利 注意: ...

  4. C#Framework4.0支持异步async/await语法

    由于用户使用的是XP系统,但是程序里异步都是通过async/await代码来实现的,然而async/await需要Framework4.5版本才可以,而XP系统最高只能支持到Framework4.0, ...

  5. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  6. Siki_Unity_2-4_UGUI_Unity5.1 UI 案例学习

    Unity 2-4 UGUI Unity5.1 UI 案例学习 任务1-1:UGUI简介 什么是GUI: 游戏的开始菜单 RPG游戏的菜单栏.侧边栏和功能栏(比如背包系统.任务列表等) 设计用来控制移 ...

  7. TW实习日记:前三天

    今天是2018年7月20号,周五.从周一开始实习到现在,终于想起来要写日记这种东西了,可以记录一下自己这一天所学所做所知也是蛮不错的.先简单总结一下自己的大学生活吧,算是多姿多彩,体验了很多东西.在大 ...

  8. Spark配置参数的三种方式

    1.Spark 属性Spark应用程序的运行是通过外部参数来控制的,参数的设置正确与否,好与坏会直接影响应用程序的性能,也就影响我们整个集群的性能.参数控制有以下方式:(1)直接设置在SparkCon ...

  9. Java实现在线预览功能

    java实现在线预览功能,需要用到  jacob.dll jacob.jar   预览pdf所需js  pdfobject.min.js 将上传文件转为pdf保存. <div class=&qu ...

  10. Jenkins之Sonar 代码检查

    一.简介 SonarQube 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等 ...