首先需要引用jquery-1.7.2.js.

页面下拉框有对应的数据,此下拉框的查询将不与服务器交互。本地下拉框查询。暂不支持通过键盘上下按键和enter键控制


 // JavaScript Document
//使用方法:IniteMyInputSelect('id');IniteMyInputSelect(['id1','id2','id3']);
//id不需要加‘#’,且必须是id
function IniteMyInputSelect(k) {
//如果是数组
if ((typeof (k) == 'object') && k.constructor == Array) {
for (var i = 0; i < k.length; i++) {
$('#' + k[i]).IniteInputSelect();
}
}
else if ((typeof (k) == 'string') && k.constructor == String) {
$('#' + k).IniteInputSelect();
}
}
$(function ($) {
$.fn.IniteInputSelect = function () {
$(this).click(function () {
var id = $(this).attr('id');
var inputid = id + '_input';
var contentid = id + '_content';
var contentdivid = contentid + ' div';
var idoptionid = id + ' option';
var position = $(this).position();
var wd = parseInt($(this).css('width')) + 20;
var input = "<input id='" + inputid + "' type='text' style='" + $(this).attr('style') + "' class='" + $(this).attr('class') + "' /><div id='" + contentid + "' style='position:absolute;z-index:1010;width:" + wd + "px; height:220px; border:1px solid #CCC; background:#FFF;overflow-x:hidden;overflow-y:auto;left:" + position.left + "px; '></div>";
//创建一个input标签给用户输入
$(this).after(input);
$(this).hide();
$('#' + inputid).focus();
//注册点击事件
$('#' + contentdivid).live('click', function () {
var v = $(this).attr('value');
$('#' + id).val(v).show().change();
$('#' + contentid).remove();
$('#' + inputid).remove();
})
//注册鼠标移动上去事件
$('#' + contentdivid).live('mouseover', function () {
$(this).css('background', '#cacaca').css('color', 'white'); })
//注册鼠标移出事件
$('#' + contentdivid).live('mouseout', function () {
$(this).css('background', '').css('color', 'black');
})
//TODO:有问题需要修改 注册在其他位置点击事件
$(document).click(function (e) {
var $target = $(e.target);
var clickid = $target.attr('id');
if (!(clickid == id || clickid == inputid || clickid == contentdivid || $target.is('#' + contentdivid) || $target.is('#' + id) || $target.is('#' + inputid) || $target.is('#' + id+" option"))) {
$('#' + id).show();
$('#' + contentid).remove();
$('#' + inputid).remove();
}
});
//筛选结果 开启筛选
$('#' + inputid).keyup(function () {
var v = $(this).val();
$('#' + contentid).html('');
$('#' + idoptionid).each(function () {
if ($(this).html().search(v) > -1 || v == '') {
var ct = $(this).html();
var cv = $(this).attr('value');
$('#' + contentid).append('<div value="' + cv + '" style="height:24px;line-height:24px; overflow:hidden;color:black;padding-left:3px;cursor: pointer;">' + ct + '</div>');
}
}) })
$('#' + inputid).keyup();
}) }
});

浏览器本地下拉框查询选择js的更多相关文章

  1. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Jquery下拉框左右选择

    1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...

  3. jquery 下拉框左右选择

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  4. selenium 显示等待wait.until 常用封装 及下拉框的选择操作等

    from selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWait a ...

  5. 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  6. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

  7. Js获取下拉框当前选择项的文本和值

    现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法: <span class="red">* </span> 地       区: ...

  8. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  9. robotframework使用之 下拉框的选择

    选择下拉框有几种方式处理,首先在浏览器F12选择下拉框 1. F12后看见下拉框的源码是<option xxx> <select class="w_60" dat ...

随机推荐

  1. Archaius 原理

    Archaius 原理 Archaius是什么? Archaius提供了动态修改配置的值的功能,在修改配置后,不需要重启应用服务.其核心思想就是轮询配置源,每一次迭代,检测配置是否更改,有更改重新更新 ...

  2. 判断ssh远程命令是否执行结束

    注:这是一个没什么鸟用的功能.不过也算是一种拓展. 通常在那些"一键化部署"的shell脚本中,可能需要使用ssh执行远程命令来实现一些简单的自动化,这些远程命令可能需要执行一段时 ...

  3. windows下postgresql安装失败解决方法:无法运行getlocales.exe

    今天要安装postgresql但是安装的时候出现错误 Unknown error while running C:\Users\jinjin\AppData\Local\Temp\postgresql ...

  4. Android学习——NDK交叉编译

    原创作品,转载请注明出处,严禁非法转载.如有错误,请留言! email:40879506@qq.com 一. 环境1.GNU/Linux Ubuntu12.04操作系统(x86) 二. 下载NDK安装 ...

  5. QT 设计师使用样式表添加背景

    QT create中样式表可以用来设置背景图.背景颜色.字体大小格式颜色等 1.添加背景图的话需要先添加资源文件 右击项目文件选择添加新文件,再选择QT资源文件(QT resource file)然后 ...

  6. ZOJ-1456 Minimum Transport Cost---Floyd变形+路径输出字典序最小

    题目链接: https://vjudge.net/problem/ZOJ-1456 题目大意: Spring国家有N个城市,每队城市之间也许有运输路线,也可能没有.现在有一些货物要从一个城市运到另一个 ...

  7. html标记语言 --表单

    html标记语言 --表单 七.表单 1.表单标记 1.1表单中的内容 <form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单 ...

  8. JS面向对象特性和值类型与复合类型

      JS面向对象之特性已经值类型与复合类型 一些属性 空对象 空对象也是对象, 只是有存变量的变量名, 没有对象属性 var o ={}; 参数传递 值类型: 函数内外两个变量, 两个数据, 都不相同 ...

  9. Python面向对象——多重继承

    1本文的作用 一个从多个父类继承过来的子类,可以访问所有父类的功能. 2图文介绍 3代码验证 class Contact: all_contacts = [] def __init__(self, n ...

  10. C#之FTP上传下载(一)

    搭建FTP服务器 最近要实现这样一个功能:FTP服务器的上传和下载,搜集了一些资料,在c播客上看到昵称为"傻丫头和科技"的作者写的一篇文章写得挺好,有的地方个人觉得不是很详细,自己 ...