由于项目中下拉框的list比较长 显的不好看,于是自己写了一个select 时间关系 写的不是很规范;都是使用的内嵌样式,可以自己调整select的高度
调用方式:只需要把 装有select的 父标签(如div,form,里面装有多个select)id传入 changeselect(id) 即可
changeselect('divid')
代码:
var ly_select_currtren=null; //存放当前操作的下拉框
var ly_input_currtren=null; //存放当前操作的 input
function changeselect(id){
$('#'+id).find('select').each(function(i){
var csel = $(this);
var top = isExplorer(ExplorerType.MSIE)?'absmiddle':'top';
var inp = $('<input readonly id="'+id+i+'" type="text" />').prependTo(csel.parent());
var ini = $('<img align="'+top+'" style="cursor:pointer;" alt="" src="cnznjt_images/arrowxl.png" />');
inp.after(ini);
inp.width(csel.width()-17).val(csel.find('option:first').text());
if(csel[0].className.indexOf('validate') != -1)
inp.addClass('validate[custom[isnull]'); //这里是为了培训项目中的验证框架 要不要无所谓
csel.hide();
inp[0].onclick=hand;
ini[0].onclick=hand;
var options = csel.find('option');
var w = csel.width();
var h = 150;
function hand(event){
ly_select_currtren = csel;
ly_input_currtren = inp;
$('.selectdiv').remove();
var pos = GetObjPos(inp[0]);
var jid1 = $('<div id="id1" class="selectdiv" style="width:300px;height:98px;border:#7F9DB9 1px solid;z-index:202;position:absolute;background:#ffffff;overflow-y:scroll;"></div>').appendTo('body');
var str = '';
options.each(function(){ //获取原来select中的option 放到div中模拟select下拉列表
str += '<div myid="'+this.value+'" onclick="clickhand(this)" onmouseout="this.style.backgroundColor=\'\';this.style.color=\'\'" onmouseover="this.style.backgroundColor=\'blue\';this.style.color=\'white\'" style="overflow:hidden;white-space:nowrap;heigth:20px;cursor:pointer;width:'+(w-20)+'px;margin-top:1px;" title="'+$(this).text()+'">'+$(this).text()+'</div>';
});
jid1.css('left',pos.x).css('top',pos.y+22).width(w).height(h).html(str);
stopBubble(event);
document.onmousedown=function(){
jid1.remove();
document.onmousedown=null;
}
jid1[0].onmousedown=function(event){
//只阻止了向上冒泡,而没有阻止向下捕获,所以点击con的内部对象时,仍然可以执行这个函数
stopBubble(event);
}
return false;
}
function bb(d){
alert(d.className)
csel.val(d.className);
$('.selectdiv').remove();
}
});
}
function clickhand(d){
$('.selectdiv').remove();
ly_select_currtren.val(d.getAttribute('myid'));
ly_input_currtren.val(d.innerHTML);
ly_input_currtren[0].focus();
ly_input_currtren[0].blur();
if(ly_select_currtren[0].onchange)
ly_select_currtren[0].onchange();
}
function CPos(x, y){
this.x = x+1;
this.y = y;
}
function GetObjPos(ATarget){ //获取坐标
var target = ATarget;
var pos = new CPos(target.offsetLeft, target.offsetTop);
var target = target.offsetParent;
while (target)
{
pos.x += target.offsetLeft;
pos.y += target.offsetTop;
target = target.offsetParent
}
return pos;
}
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation(); //w3c
}else{
window.event.cancelBubble=true; //IE
}
}
分享到:
相关推荐
标题中的"jq写的模拟elementui的select"意味着有人使用jQuery来仿造ElementUI中的Select组件功能。这通常是因为在某些项目中,可能由于历史原因或者特定需求,开发者选择了jQuery而不是Vue.js作为主要的JavaScript库...
基于linux ,使用select检测串口句柄事件,同时进行超时判断的串口485读写操作。为高效可控的linux串口操作例程。tcsetattr,tcflush,select,ioctl,gettimeofday。485收发方向切换。
通过JS和CSS来实现模拟select控件来解决IE6 select遮挡的BUG。很实用
为了提高效率和减少资源消耗,将`UPDATE`语句与`SELECT`语句相结合是一种非常实用的方法。这种方式可以实现更高效的数据处理,特别是在需要批量更新记录时。下面我们将深入探讨如何将`UPDATE`与`SELECT`结合使用,并...
下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选插件ySelect.js.rar 下拉多选...
当其中一个文件描述符准备好时,`select`会阻塞,直到有文件描述符变为可读、可写或有异常发生。返回值是就绪的文件描述符集合的个数,或者在超时后返回0。 在服务器端,我们通常需要设置监听套接字到`readfds`集合...
SELECT 语句是 SQL 中最基本也是最重要的语句之一,它用于从数据库中检索数据。 SELECT 语句的基本结构为:SELECT 语句、FROM 语句、WHERE 语句。其中,SELECT 语句用于指定要检索的列,FROM 语句用于指定要检索的...
select ——使用DIV 实现 Select js源码
以下是一个关于如何在`<select>`和`<option>`中添加自定义图片的详细教程。 首先,我们需要理解HTML基础。`<select>`元素创建一个可选列表,用户可以选择其中的一个或多个选项。`<option>`元素定义了下拉列表中的一...
标题"自定义带图标的select,只需把图标地址写在option的title属性中即可"揭示了这个插件的核心功能,即通过简单的配置就能实现带图标的下拉选项。 首先,让我们理解下拉框(`<select>`)的基本概念。在HTML中,`...
根据提供的文件信息,我们可以深入分析并提取出与“javascript写的select”相关的技术知识点。下面将对这些知识点进行详细的解析。 ### JavaScript自定义Select组件 #### 1. 功能概述 根据描述,这是一个用...
原生select实现多选功能
在网页设计中,`<select>`元素用于创建下拉菜单,但它的样式受到浏览器的限制,难以实现自定义设计。为了突破这些限制,开发者经常使用`div`和`css`来模拟`select`下拉菜单,以实现更丰富的视觉效果和交互体验。这种...
### JavaScript操作表单Select元素的常用步骤 在Web开发中,`<select>`标签用于创建一个下拉列表供用户选择选项。使用JavaScript可以方便地控制这些下拉列表的行为,例如添加、删除或修改选项等。下面详细介绍如何...
首先,`select`函数是Linux系统调用之一,它的主要作用是监控一组文件描述符,等待它们变为可读、可写或出现错误状态。这使得开发者可以构建高效的并发服务器,避免了因轮询每个连接而浪费的CPU资源。在描述中的简单...
这些套接字被添加到`select`的文件描述符集中,然后服务器进入`select`的循环,等待这些套接字变为可读或可写。 4. **利用`select`实现并发** 当`select`返回时,服务器可以遍历更新后的文件描述符集,找出可读的...
这类试题可能包括解决特定问题的查询示例,或者要求读者自己构造正确的`SELECT`语句。 总之,从一个`SELECT`到另一个`SELECT`的核心在于理解如何使用子查询和联接来处理多层数据关系。掌握这些技巧对于任何需要处理...
### 可编辑Select下拉框实现方法 #### 一、引言 在现代Web开发中,用户界面(UI)的设计对于提升用户体验至关重要。一个常见的需求是实现一个可编辑的`<select>`下拉框,即允许用户不仅能从下拉列表中选择选项,还...
描述:自己写的一个聊天服务器,主要用到select异步处理!” 在这个项目中,开发者使用C++编程语言在Linux操作系统平台上构建了一个聊天服务器。这个服务器的核心功能是通过`select`系统调用来实现异步处理,这是...
# 这里可以写具体的命令 command done ``` 其中: - `name`:用来保存用户输入的选择值。 - `item1 item2 ... itemN`:这些是显示给用户选择的选项列表。 - `do` 和 `done`:定义了`select`语句的开始和结束。 - ...