div模拟下拉框 select

最新推荐文章于 2023-06-08 22:28:43 发布
最新推荐文章于 2023-06-08 22:28:43 发布
阅读量4.2k 收藏
点赞数
分类专栏： Web 文章标签： div class dropdown function input table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuruichang/article/details/1562389
版权

<HTML>
<HEAD>
<title>模拟下拉列表框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>BODY {
FONT: 12px 宋体
}
TD {
FONT: 12px 宋体
}
DIV {
FONT: 12px 宋体
}
LABEL {
PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; PADDING-TOP: 3px; HEIGHT: 19px
}
.link_box {
CURSOR: default; TEXT-ALIGN: left
}
.link_head {
BORDER-RIGHT: 2px inset; BORDER-TOP: 2px inset; BORDER-LEFT: 2px inset; WIDTH: 100%;
BORDER-BOTTOM: 2px inset; HEIGHT: 23px
}
.link_text {
PADDING-LEFT: 2px; BACKGROUND: #fff
}
.link_arrow0 {
BORDER-RIGHT: 2px outset; BORDER-TOP: 2px outset; BACKGROUND: buttonface;
FONT: 14px marlett; BORDER-LEFT: 2px outset; WIDTH: 22px;
 BORDER-BOTTOM: 2px outset; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_arrow1 {
BORDER-RIGHT: buttonshadow 1px solid; PADDING-RIGHT: 0px;
BORDER-TOP: buttonshadow 1px solid; PADDING-LEFT: 2px;
BACKGROUND: buttonface; PADDING-BOTTOM: 0px; FONT: 14px marlett;
BORDER-LEFT: buttonshadow 1px solid; WIDTH: 22px; PADDING-TOP: 2px;
BORDER-BOTTOM: buttonshadow 1px solid; HEIGHT: 100%; TEXT-ALIGN: center
}
.link_value {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity:0);
VISIBILITY: hidden; OVERFLOW-X: hidden; OVERFLOW: auto; BORDER-LEFT: 1px solid;
BORDER-BOTTOM: 1px solid; POSITION: absolute
}
.link_record0 {
BORDER-TOP: #eee 1px solid; PADDING-LEFT: 2px; BACKGROUND: #fff;
WIDTH: 100%; COLOR: #000; HEIGHT: 20px
}
.link_record1 {
BORDER-TOP: #047 1px solid; PADDING-LEFT: 2px; BACKGROUND: #058;
WIDTH: 100%; COLOR: #fe0; HEIGHT: 20px
}
</style>
<script>
var dropShow=false
var currentID
function dropdown(el){
if(dropShow){
dropFadeOut()
}else{
currentID=el
el.style.visibility="visible"
dropFadeIn()
}
}
function dropFadeIn(){//选单淡入的效果
if(currentID.filters.alpha.opacity<100){
currentID.filters.alpha.opacity+=20
fadeTimer=setTimeout("dropFadeIn()",50)
}else{
dropShow=true
clearTimeout(fadeTimer)
}
}
function dropFadeOut(){//选单淡出的效果
if(currentID.filters.alpha.opacity>0){
clearTimeout(fadeTimer)
currentID.filters.alpha.opacity-=20
fadeTimer=setTimeout("dropFadeOut()",50)
}else{
dropShow=false
currentID.style.visibility="hidden"
}
}
function dropdownHide(){
if(dropShow){
dropFadeOut()
dropShow=false
}
}
function hiLight(el){//高亮度显示指标位置
if(dropShow){
for(i=0;i<el.parentElement.childNodes.length;i++){
el.parentElement.childNodes(i).className="link_record0"
}
el.className="link_record1"
}
}
function CheckMe(el){//替换显示内容
document.all.text1.innerText=el.innerText
}
document.οnclick=dropdownHide
</script>
</HEAD>
<body text="#000000" οnlοad="document.all.form1.reset()">
<div style="padding:10px;border-bottom:2px solid red">模拟下拉框</div>
<form method="post" action="WebDropDownList.aspx" id="form1" οnsubmit="alert(city.value)">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MzkwMjYyODZkZA==" />
</div>

<table>
<tr>
<td>
<div class="link_box" onselectstart="return false" style="WIDTH: 100px">
<div class="link_head" οnclick="dropdown(value1)">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
 <td>
  <div class="link_text"><nobr><label id="text1">请选择？</label></nobr></div>
 </td>
 <td align="right" width="22">
  <div οnmοuseup="this.className='link_arrow0'" class="link_arrow0"
  οnmοusedοwn="this.className='link_arrow1'" οnmοuseοut="this.className='link_arrow0'">6</div>
 </td>
</tr>
</table>
</div>
<div class="link_value" id="value1" style="WIDTH: 200px; HEIGHT: 100px">
<div id="mx">
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>北京市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>上海市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>河南省</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>深圳市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>大连市</label></div>
<div class="link_record0" οnmοuseοver="hiLight(this)"
 οnclick="CheckMe(this);document.all.form1.city.value=this.innerText"><label>云南省</label></div>
</div>
</div>
</div>
</td>
<td><input type="hidden" value="您尚未选择" name="city"> <input type="submit" value="确定">
</td>
</tr>
</table>
</form>
</body>
</HTML>

摘自：http://dotnet.aspx.cc/WebDropDownList.aspx 

今晚打老虎2010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
给select添加滚动条
weixin_39721063的博客
08-05 3123
<select style="position: absolute; z-index: 1; margin-left: 40px;" class="choose" onblur="size=0" onmousedown="if(options.length>6){size=7}" onchange="size=0" > <option value="volvo">文学集</option> <opt..
为select选择框增加滚动条
u012470138的博客
10-18 1万+
当下拉菜单选项比较多的时候，select下拉列表在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条。效果如下图：
a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。
是秃子总会发光
03-13 6032
a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。
div模拟select/option解决兼容性问题及增加可拓展性
weixin_30386713的博客
08-14 159
个人博客： http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式，比如line-height等，还会由此导致在IE8及以下版本浏览器中的各种问题。 这个模拟思路很简单，也很清晰，我就直接上代码了 html： 第一层div是模拟select标签，第二层div是模拟option...
demo-div模拟select下拉框
weixin_30699465的博客
08-20 120
用div模拟下拉框，粘贴复制代码直接使用，小图标需替换自己的 html部分： <div class="mod_select"> <div class="box-select box-select-bg2" style="border: none;"> <span class="select_txt">全部</span> <...
div模拟下拉框
09-28
在网页设计中，"div模拟下拉框"是一种常见的技术，用于替代HTML原生的`<select>`元素，以提供更灵活的样式控制和交互体验。`<select>`标签虽然简单易用，但在某些场景下可能无法满足设计师的个性化需求，如自定义...
DIV模拟select下拉框
12-18
文件名为"DIV模拟select1"可能是一个示例项目或代码文件，用于演示如何使用jQuery和CSS创建这样一个模拟下拉框。在实际操作中，通常会包含HTML结构、CSS样式表和JavaScript脚本。HTML部分可能包含一个父级<div>元素...
jQuery模拟select下拉框插件
06-24
它通常会用一个`<div>`或其他HTML元素来模拟下拉框，并结合JavaScript和CSS实现动态效果和定制样式。这种插件可以提供更多的定制选项，如分组、搜索、过滤、无限滚动等功能，使得用户体验更加友好。 对于多选功能，...
div模拟下拉框的Demo
03-19
使用div模拟下拉框则可以自由调整外观，包括字体、颜色、边框、阴影等，并能实现更丰富的动画效果。 在Demo中，通常会有一个主div作为下拉框的容器，点击时显示或隐藏下拉选项列表。这个列表也是由div组成的，每个...
模拟下拉框select
01-07
模拟下拉框select，之前穿过一个，是纯div和li写的，现在这个的本质还是select，虽然没有经过实验，不过应该不用怕开发的时候取不到值这个问题，修改起来也很简单，只要有点css基础的都应该没有问题~
为select下拉框添加滚动条
10-18
当下拉菜单选项比较多的时候，select下拉列表内容过多，在IE中默认是30条选项，firefox默认是20条， 超过自动出现滚动条，但是在没出现滚动条时候样式特别不协调。本次上传的代码将提供一种方法将select下拉框添加滚动条
JS+DIV模拟SELECT表单域
weixin_30950607的博客
02-08 88
最近在做一个AJAX项目，其中用到很多满屏层的模拟屏幕锁定，但有个很头痛的东西，就是下拉列表框始终会显示在层的上面，为了解决这个问题才写了这个JS类，个人感觉还好用，在这和大家分享下，有好的意见也请提出！ 效果预览： 程序代码： 以下为引用的内容： <html> <head...
封装el-select，实现虚拟滚动,可单选、多选、搜索查询、创建条目
金乌的博客
05-18 6904
表单中某下拉框，由于数据过多，选择的时候会因为数据量过大导致页面卡顿，于是对于el-select进行二次封装，实现虚拟滚动。看起来是加载了全部数据，实际上只加载了自己设定的10条（可修改）数据。concatSymbol 拼接 label 和 value 的符号。isConcat 是否拼接 label 和 value。isRight 是否右边显示value（code）值。二、el-option-node.vue。三、utils index.js。Step2： 创建两个文件。一、Select.vue。
将下拉菜单设为滚动效果
最新发布
Yan-note
06-08 1261
需要注意的是，滚动条仅在下拉菜单内容超出容器高度时才会显示，如果没有超出高度，滚动条不会显示。此外，在某些浏览器中，滚动条可能不会起作用，这时需要更改滚动条的样式或者使用其他方案来解决问题。以上是将下拉菜单设置成滚动效果的基本步骤。可以根据实际需求调整滚动条的宽度、颜色和边角弧度等样式，实现更加个性化的效果。
div ul li模拟下拉选项(option标签)
黄彪博客
12-04 5995
现在很多页面为样式的美观，对option标签的使用越来越少了，而是自己定义一种样式来模拟这样的情况，下面这个例子是我自己写的方法，但是没有做css样式，希望大家能够明白我在说什么   $( function(){ $("#lang").click(function(){ if("block" == $("#huangbiao").css("displa
高仿el-select单选搜索+前端大数据下拉滚动分页
happy921212的博客
11-10 2134
最近在用element-ui遇到一些bug,在使用el-select时，数据量大了就页面渲染缓慢从而
div模拟下拉框效果
qq_45693559的博客
03-14 392
【代码】div模拟下拉框效果。
如何定义Select下拉框的边框颜色和滚动条样式
热门推荐
Here I am
04-02 1万+
下面是从网上搜的，记录一下....方法一：只定义下拉框边框样式。 span style="position:absolute;border:1px solid #000000;width:80;height:20"> select style="position:absolute;clip:rect(2 80 20 2);margin:-2;width:84;background:#e
用div元素模拟select下拉框
weixin_41266588的博客
04-28 1259
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>测试</title> <!--jquery 记得换成自己路径下的jq文件 或者使用网络地址--> <script type="text/javascript" src="js/jque...
selenium 下拉框非select input
06-07
如果你要处理的下拉框不是 HTML 的 select input 标签类型，而是其他类型的标签（比如 div、ul、li 等），你可以使用 Selenium 的 ActionChains 类来模拟用户交互行为，从而实现下拉框的选择。 例如，如果要选择一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值