工作需要把页面中的所有select标签替换为其他类似的下拉框，模仿了好久，终于成功。感到非常欣慰，特写出来分享一下。有更好建议的可以提出来，把这个小东东改的更好一些。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="js中 regedit_name,regedit都是为了方便点击其他地方，收缩下拉框的">
<META NAME="Description" CONTENT="模拟select,使用说明：1:id = ‘ComboBox’ 必须要保留，这样可以当点击其他地方时收缩列表,但是可以修改;2: id='DropDown_1',否则当点击该节点下拉框会隐藏">
</HEAD>
<BODY>
<div>
<TABLE id = "ComboBox2" cellSpacing=1 cellPadding=0 border=0 bgColor="black"
style="display:inline;" >
<TR bgColor = '#FFFFFF'>
<TD style="width:9">
<input type='text' style="height:18;border:1 ;width:80px" ></input>
</TD>
<TD>
<TABLE id = "DropDown" cellSpacing=0 cellPadding = 0 border = 0 bgColor="#DBD8D1"
style="display:inline;cursor:default;"
onmousedown = "fnMousedown()"
>
<TR>
<TD style="font-family: webdings;font-size:8px;text-align: center;width:13px;height:18px;" id="DropDown_1">6</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<TABLE cellSpacing=1 cellPadding=0 border=1 bgColor="#FFFFFF"
style="display:'';border-color:black;border-collapse: collapse;border-style:solid;font-size:9pt;cursor:default; solid #666666;"
></TABLE>
</div>
<SCRIPT LANGUAGE="JavaScript">
window.document.attachEvent("onclick", chkstat);
var regedit_name = ["ComboBox2"];
var regedit = {};
for(var i=0;i<regedit_name.length;i++)
{
regedit[regedit_name[i]] = document.getElementById(regedit_name[i]);
}
function chkstat()
{
var oEl = event.srcElement;
var el_id = oEl.id;
//alert();
if(el_id)//针对有id 的对象
{
var ComboBox_el = regedit[el_id];
if(ComboBox_el)
{
var ComboBox_nextSibling = ComboBox_el.nextSibling;
if(ComboBox_nextSibling.style.display != "none")
{
ComboBox_nextSibling.style.display = "none";
}
}
}
else
{
for(var i=0;i<regedit_name.length;i++)
{
var combox_1 = document.getElementById(regedit_name[i]);
if(!combox_1) return;
var combox_sibling = combox_1.nextSibling;
if(combox_sibling)if(combox_sibling.style.display != "none")
{
combox_sibling.style.display = "none";
}
}
}
}
function DropListClick()
{
obj = event.srcElement;
var DropList_1 = obj.parentNode.parentNode.parentNode;
var ComboBoxIpt = DropList_1.previousSibling.firstChild.firstChild.firstChild.firstChild
ComboBoxIpt.value = obj.innerText;
DropList_1.style.display = "none";
ComboBoxIpt.select();
DropDown.style.color = '#000000';
}
function fnMousedown()
{
var aNodes=[1,2,3,4,5,6];
var srcelement = event.srcElement;
if(!srcelement){ return;}
var ComboBox = srcelement.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
var DropList = ComboBox.nextSibling;
if(DropList)
{
f_PublicCreateDropListData(DropList,aNodes);//向DropList里添加数值
DropList.style.width = (DropList.offsetWidth < ComboBox.offsetWidth) ? ComboBox.offsetWidth : DropList.offsetWidth;
DropList.style.left = getx(ComboBox);
DropList.style.top = gety(ComboBox)+19;
DropList.style.display = '';
}
}
function f_PublicCreateDropListData(DropList,aNodes,redata)//向DropList中插入td ,option
{
if(!redata)
var re=new RegExp("^");
else
var re=new RegExp("^"+redata,"i");
var otd = null;
var No=DropList.rows.length;
if(No)for(i=0;i<No;i++)DropList.deleteRow();
for(var i=0;i<aNodes.length;i++)
{
if(re.test(aNodes[i])==true)
{
otd = DropList.insertRow().insertCell();
otd.style.height = "12px";//设定td高度
otd.style.borderColor = "black";
otd.innerHTML = aNodes[i];//设定td内的数值
otd.attachEvent("onmouseover",DropListOver);//td绑定事件
otd.attachEvent("onmouseout",DropListOut);
otd.attachEvent("onclick",DropListClick);
}
}
}
function DropListOver()
{
obj = event.srcElement;
obj.bgColor='highlight';
obj.style.color='#FFFFFF';
obj.style.cursor='default';
}
function DropListOut()
{
obj = event.srcElement;
obj.bgColor='#FFFFFF';
obj.style.color='#000000';
}
function getx(e)
{
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function gety(e)
{
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
</SCRIPT>
</BODY>
</HTML>
分享到：
相关推荐
基于jq.模仿select动作。。 好看使用。很不错。欢迎大家给意见、
自定义-js模仿下拉框效果 测过IE6/7/8 ff5.0 chremo 12.0. 是用li来模仿的,隐藏存在一个select方便form提交,其实既然只是获取选定后的数据,也可以用隐藏的input:text 代替 (如果出现什么异常可以给本人留言)
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
div+css打造select下拉菜单,可自己修改相应样式!!!
用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...
带chekcbox功能的下拉框,描述：模仿select，对下拉选项添加Checkbox框。 http://blog.csdn.net/fly2004jun/article/details/7711964
模仿地区选择下拉列表，做的，学院专业班级，下拉列表
此juqery插件模仿能输入的下拉框.能支持数组或JSON传值的创建,自动创建将原生下拉框转换为此能输入的下拉框模式,有搜索和自动完成功能,键盘鼠标方向键控制功能,能更改外部样式!
模仿 select 做的下拉菜单效果 兼容各个主流浏览器。谁用谁知道。
目标：用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。 知识点： 组件的写法及运用 组件之间的数据传递（props的运用） 组件之间的数据传递（$emit的运用） 动态数据的绑定（v-bind） 自定义事件...
摘要:.NET源码,Ajax相关,DropDownList,下拉菜单 模拟的DropDownList下拉框菜单，不但模仿出了Select下拉框的功能，而且还加入了网页动画效果，Select菜单是慢慢的出现，慢慢的消失，鼠标点选菜单某一项的时候，该项...
目前做成用户控件可以直接调用，值需要在后台界面配置数据源就行了，完全仿Google，左列显示搜索关键字，右列显示查找的结果数。
7.模拟下拉框不会被select遮挡 8.调用更方便（内核已改为jq插件） 9.皮肤修改方便 ，外置的css样式文件，带有注释说明，任意修改 10.支持键盘方向键按住不放选择 11.解决了延时卡死的现象 12.解决了在有滚动条时，ie...
7.模拟下拉框不会被select遮挡 8.调用更方便（内核已改为jq插件） 9.皮肤修改方便 ，外置的css样式文件，带有注释说明，任意修改 10.支持键盘方向键按住不放选择 11.解决了延时卡死的现象 12.解决了在有滚动条...
arrow 模仿select，使用下拉按钮。固定值。为1则显示下拉箭头 为0则不显示 arrowUrl 当arrow为1时 ，默认情况下点击下拉按钮所执行的远程搜索页面 zIndex z-index值 inputlength inputName中输入数据的最小长度 ...
7.模拟下拉框不会被select遮挡 8.调用更方便（内核已改为jq插件） 9.皮肤修改方便 ，外置的css样式文件，带有注释说明，任意修改 10.支持键盘方向键按住不放选择 11.解决了延时卡死的现象 12.解决了在有滚动条时，ie...
此小程序是模仿Google...7.模拟下拉框不会被select遮挡 8.调用更方便（内核已改为jq插件） 9.皮肤修改方便 ，外置的css样式文件，带有注释说明，任意修改 文件使用说明： 在需要使用的页面首先要引用2个js文件 ...
arrow 模仿select，使用下拉按钮。飞飞A~sp技术乐园固定值。为1则显示下拉箭头 为0则不显示 arrowUrl 当arrow为1时 ，默认情况下点击下拉按钮所执行的远程搜索页面 zIndex z-index值 inputlength inputName中输入...
也为search.asp页面获取input的nameinputText inputName 所显示的数据inputValue inputName 所提交的数据，当inputValue省略时，inputValue则与inputText相等url 远程执行获取数据的urlarrow 模仿select，使用下拉...
如何解决ACCESS中SELECT TOP语句竟然返回多条记录的问题？ Asp.net 利用OleDb的GetOLEDBSchemaTable方法得到数据库架构信息 用于 Visual Studio .Net 的 IBM DB2 开发外接程序 第2章 并发操作的一致性问题 (2) Using...