模仿select,类似select的下拉框。

最新推荐文章于 2022-03-17 15:03:30 发布
最新推荐文章于 2022-03-17 15:03:30 发布
阅读量406 收藏
点赞数
文章标签： HTML 工作
工作需要把页面中的所有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>

阳光下的小鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery模拟select效果实现
07-14
Jquery模拟select效果实现，纯自写，简单实用，可自行修改样式。
jquery 模仿 select
yuejiaqi的专栏
09-07 1803
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> Selectbox模拟 * { margin:0; padding:0;} bod
仿写select
u011853017的博客
03-17 833
初学前端记录下学习成果 <style> .tc_ul{ margin-left: 0; padding-left: 0; position: absolute; border: 1px solid #ccc; /*border-bottom: 0px;*/ } .tc_ul li{ list-style: none; padding: 3px;
仿Select实现带图标的下拉框
lanying100的博客
08-12 2151
参考网址：https://github.com/jsanahuja/jquery.customSelect
类似百度搜索下拉框的实现
scy_fighting的博客
06-14 4866
从百度截图如下：要实现的公司与该图类似，只不过没有详细优化样式。哈哈，大家不要介意。（还有我的这个功能用的是百度的接口）我用了两种方式来实现这个功能，一种是原生的js方式，一种是jQuery的方式。可以对比。1、用原生方式实现。&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"...
原生js text文本框模拟select下拉框美化点击下拉菜单选
11-11
原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...
精美漂亮的实用div+css模仿select下拉框控件
03-01
2. **模仿Select控件** HTML的`<select>`元素是网页表单中的一种，通常用于提供一组选项让用户选择。但是，其默认样式在不同浏览器之间存在差异，且样式定制较为复杂。通过jQuery和CSS，我们可以自定义下拉框的外观...
ul模仿select选框
06-05
为了使这个模拟的下拉框具有交互性，我们需要使用JavaScript（例如jQuery）来处理点击事件，并更新选中的选项： ```javascript $(document).ready(function() { $('#customSelect li').click(function() { $(this...
模仿google下拉框模仿google下拉框
07-13
在IT行业中，模仿Google下拉框是一项常见的前端开发任务，主要目的是为了提供用户友好的搜索体验，提升网站或应用的交互性。Google的下拉框以其高效、智能和易用性著称，许多开发者尝试复制这种功能以实现类似的效果...
自定义-js模仿下拉框效果
07-21
自定义-js模仿下拉框效果 测过IE6/7/8 ff5.0 chremo 12.0. 是用li来模仿的,隐藏存在一个select方便form提交,其实既然只是获取选定后的数据,也可以用隐藏的input:text 代替 (如果出现什么异常可以给本人留言)
div模拟select
03-01
博文链接：https://angushj.iteye.com/blog/127845
面包屑多级下拉菜单
05-23
面包屑多级下拉菜单
好看的css下拉框样式,实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING
weixin_33060757的博客
08-04 4469
插件描述：今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的预览图width="474" height="300" title="下拉框" alt="下拉框"/>alt=""/>alt=""/>使用步骤该插件有5种表现形式，下面我就介绍一下第一种样式的实现，其它的大概一致，大家可以参...
类似 select 选择框效果及美化
weixin_30895603的博客
08-12 63
网上有各种各样的关于select 选择框的美化，找了很多，并没有好的样式效果。所以就找了一个利用 ul li 做的类似select 选择框的效果，不废话了，先上图，效果如下： 对于上图的箭头效果，可以看看我上篇博客 点击这里 点击一个 test ，就会把列表显示出来，再次点击，列表隐藏，选择一个 li ，就会把 span 里的内容替换成 li 的内容，然后可以用 js 监控 span ...
模仿select下拉列表
weixin_30530523的博客
05-12 127
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></scrip...
利用Div仿Select控件
Qiustion的专栏
04-18 6292
目的是解决自定义的select控件在IE下显示不完整
JQ模仿select
weixin_30757793的博客
07-07 54
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" t...
基于Jquery的模拟Select下拉菜单
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
09-20 707
无标题文档 *{ margin:0; padding:0; list-style:none;} /*套在Select外层，用于隐藏Select框*/ .selectContainer{position:relative; width:262px; display:inline-block; _display:inline; _zoom:1; z-index:1000; background:#
jquery模拟实现仿select效果
卡布洛技术专栏
07-14 7647
本着服务为人民的远大理想，最近写了个jquery模拟select效果的小东东，挺好用，分享下。 可以直接在我上传的资源里下载压缩包，下载地址：jquery模拟实现仿select效果。 首先，上html页面代码 js模拟select 省份 北京 河北省 山东省 城市
手写select下拉框
最新发布
05-24
下面是一个简单的手写select下拉框的示例代码： ```html <!-- HTML代码 --> <div class="select-box"> <select name="fruits" class="select-list"> 苹果 香蕉 橙子 梨子 </select> <span class="select-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值