`
luo_yong_men
  • 浏览: 27813 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论
阅读更多
由于项目中下拉框的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

    标题中的"jq写的模拟elementui的select"意味着有人使用jQuery来仿造ElementUI中的Select组件功能。这通常是因为在某些项目中,可能由于历史原因或者特定需求,开发者选择了jQuery而不是Vue.js作为主要的JavaScript库...

    基于select的Linux串口485读写,文件描述符 fd_set

    基于linux ,使用select检测串口句柄事件,同时进行超时判断的串口485读写操作。为高效可控的linux串口操作例程。tcsetattr,tcflush,select,ioctl,gettimeofday。485收发方向切换。

    手写模拟select

    通过JS和CSS来实现模拟select控件来解决IE6 select遮挡的BUG。很实用

    Update和Select结合使用

    为了提高效率和减少资源消耗,将`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 下拉多选插件ySelect.js.rar 下拉多选...

    select函数写的简单聊天室

    当其中一个文件描述符准备好时,`select`会阻塞,直到有文件描述符变为可读、可写或有异常发生。返回值是就绪的文件描述符集合的个数,或者在超时后返回0。 在服务器端,我们通常需要设置监听套接字到`readfds`集合...

    select option带自定义图片

    以下是一个关于如何在`&lt;select&gt;`和`&lt;option&gt;`中添加自定义图片的详细教程。 首先,我们需要理解HTML基础。`&lt;select&gt;`元素创建一个可选列表,用户可以选择其中的一个或多个选项。`&lt;option&gt;`元素定义了下拉列表中的一...

    select form where 语句

    SELECT 语句是 SQL 中最基本也是最重要的语句之一,它用于从数据库中检索数据。 SELECT 语句的基本结构为:SELECT 语句、FROM 语句、WHERE 语句。其中,SELECT 语句用于指定要检索的列,FROM 语句用于指定要检索的...

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    标题"自定义带图标的select,只需把图标地址写在option的title属性中即可"揭示了这个插件的核心功能,即通过简单的配置就能实现带图标的下拉选项。 首先,让我们理解下拉框(`&lt;select&gt;`)的基本概念。在HTML中,`...

    原生select实现多选功能

    原生select实现多选功能

    javascript写的select

    根据提供的文件信息,我们可以深入分析并提取出与“javascript写的select”相关的技术知识点。下面将对这些知识点进行详细的解析。 ### JavaScript自定义Select组件 #### 1. 功能概述 根据描述,这是一个用...

    div+css模拟select

    在网页设计中,`&lt;select&gt;`元素用于创建下拉菜单,但它的样式受到浏览器的限制,难以实现自定义设计。为了突破这些限制,开发者经常使用`div`和`css`来模拟`select`下拉菜单,以实现更丰富的视觉效果和交互体验。这种...

    javascript 操作表单select的常用步骤

    ### JavaScript操作表单Select元素的常用步骤 在Web开发中,`&lt;select&gt;`标签用于创建一个下拉列表供用户选择选项。使用JavaScript可以方便地控制这些下拉列表的行为,例如添加、删除或修改选项等。下面详细介绍如何...

    Linux网络通信select模型

    首先,`select`函数是Linux系统调用之一,它的主要作用是监控一组文件描述符,等待它们变为可读、可写或出现错误状态。这使得开发者可以构建高效的并发服务器,避免了因轮询每个连接而浪费的CPU资源。在描述中的简单...

    tcp select 并发服务器

    这些套接字被添加到`select`的文件描述符集中,然后服务器进入`select`的循环,等待这些套接字变为可读或可写。 4. **利用`select`实现并发** 当`select`返回时,服务器可以遍历更新后的文件描述符集,找出可读的...

    从一个select到另一个select

    这类试题可能包括解决特定问题的查询示例,或者要求读者自己构造正确的`SELECT`语句。 总之,从一个`SELECT`到另一个`SELECT`的核心在于理解如何使用子查询和联接来处理多层数据关系。掌握这些技巧对于任何需要处理...

    写一个可编辑的select下拉框

    ### 可编辑Select下拉框实现方法 #### 一、引言 在现代Web开发中,用户界面(UI)的设计对于提升用户体验至关重要。一个常见的需求是实现一个可编辑的`&lt;select&gt;`下拉框,即允许用户不仅能从下拉列表中选择选项,还...

    select server

    描述:自己写的一个聊天服务器,主要用到select异步处理!” 在这个项目中,开发者使用C++编程语言在Linux操作系统平台上构建了一个聊天服务器。这个服务器的核心功能是通过`select`系统调用来实现异步处理,这是...

    select命令用法详解

    # 这里可以写具体的命令 command done ``` 其中: - `name`:用来保存用户输入的选择值。 - `item1 item2 ... itemN`:这些是显示给用户选择的选项列表。 - `do` 和 `done`:定义了`select`语句的开始和结束。 - ...

    可选择可输入的select

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉菜单,用户可以在其中进行选择。然而,传统的`&lt;select&gt;`元素并不支持用户直接输入新值,这限制了其交互性。"可选择可输入的select"就是一种改进的下拉菜单实现,它允许...

Global site tag (gtag.js) - Google Analytics