浏览器本地下拉框查询选择js
首先需要引用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的更多相关文章
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery下拉框左右选择
1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...
- jquery 下拉框左右选择
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- selenium 显示等待wait.until 常用封装 及下拉框的选择操作等
from selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWait a ...
- 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色
查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...
- 利用js取到下拉框中选择的值
现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...
- Js获取下拉框当前选择项的文本和值
现在有一个Id为AreaId的下拉框,要获取它当前选择项的文本和值有以下方法: <span class="red">* </span> 地 区: ...
- jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)
效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...
- robotframework使用之 下拉框的选择
选择下拉框有几种方式处理,首先在浏览器F12选择下拉框 1. F12后看见下拉框的源码是<option xxx> <select class="w_60" dat ...
随机推荐
- Object.defineProperties()和Object.defineProperty()方法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象. 语法:Object.defineProperty(obj, pro ...
- final类与final方法
inal---用于类.方法前. final类---不可被继承. final方法---不可被覆盖. final类不能被继承. 如果我们不希望一个类被继承,我们使用final来修饰这个类.这个类将无法被继 ...
- java设计模式—— 工厂模式
菜鸡互啄... 工厂模式通过定义一个创建对象的接口,让其子类决定实例化哪个工厂类.因此我们要解决接口选择的问题,实现不同的计划创建不同的对象. 首先我们定义一个轿车接口 public interfac ...
- 算法 排序lowB三人组 冒泡排序 选择排序 插入排序
参考博客:基于python的七种经典排序算法 [经典排序算法][集锦] 经典排序算法及python实现 首先明确,算法的实质 是 列表排序.具体就是操作的列表,将无序列表变成有序列表! 一 ...
- 定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容。提示(可以了解python的urllib模块)
定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容.提示(可以了解python的urllib模块) import urllib.request def get_ ...
- Git Bash
Git Bash是Git的命令行工具,可以执行Git的所有命令,但是当我们想把一个URL粘贴到Git Blash时,Ctrl+V或者右键粘贴不起作用了 方法1-使用快捷键"Insert&qu ...
- 超级好用的前端开发测试Chrome插件-基于REST的Web服务客户端
基于REST的Web服务客户端是一款功能强大的谷歌浏览器插件,使用基于REST的Web服务客户端(模拟REST客户端)可以让用户使用谷歌浏览器模拟REST请求来测试REST风格. 基于REST的Web ...
- [LeetCode] Maximum Sum of 3 Non-Overlapping Subarrays 三个非重叠子数组的最大和
In a given array nums of positive integers, find three non-overlapping subarrays with maximum sum. E ...
- [LeetCode] Degree of an Array 数组的度
Given a non-empty array of non-negative integers nums, the degree of this array is defined as the ma ...
- 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...