网站首页
关于深山
客户案例
业务范围
联系深山
网络投票系统
企业网站建设
旅行社网站建设
小程序
留言板
技术文章
许愿墙(qq爱墙)
技术首页
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
asp.net
DIV+CSS
HTML
SEO搜索引擎忧化
下载类信息
个人空间
代码生成
电商
python
页面特效
表格特效
导航菜单
图形特效
表单特效
时间日期
色彩类别
链接特效
网页特效
系统硬件
网站公告
网页学习
技术类文章
网站类信息
订阅本栏目 RSS
您所在的位置:
深山工作室
>
表单特效
> 正文
用javascript美化Select,并获取相应的值
网络 2009/1/20 21:02:16 深山行者 字体:
大
中
小
浏览 10588
以下为详细代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML lang=zh-CN xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>用javascript美化Select,并获取相应的值</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META http-equiv=Content-Language content=zh-CN> <STYLE type=text/css>* { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } BODY { MARGIN: 50px } .iDiv { BORDER-RIGHT: #aaa 1px solid; BORDER-TOP: #aaa 1px solid; FONT-SIZE: 12px; BACKGROUND: url(images/select_bg.gif) no-repeat 100% 0px; VERTICAL-ALIGN: middle; BORDER-LEFT: #aaa 1px solid; CURSOR: default; COLOR: #333; TEXT-INDENT: 4px; LINE-HEIGHT: 20px; BORDER-BOTTOM: #aaa 1px solid; POSITION: absolute; HEIGHT: 20px } .iDiv_over { BACKGROUND-POSITION: 100% 100%; COLOR: #f96 } .iDiv_out { BACKGROUND-POSITION: 100% 0px; COLOR: #333 } .cDiv { BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; Z-INDEX: 1; BACKGROUND: #f7f7f7; OVERFLOW: auto; BORDER-LEFT: silver 1px solid; CURSOR: default; BORDER-BOTTOM: silver 1px solid; POSITION: absolute; moz-user-select: none } .cDiv UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; listStyle: none } .cDiv UL LI { TEXT-INDENT: 4px; LINE-HEIGHT: 20px; HEIGHT: 20px } </STYLE> <SCRIPT> function $() { return document.getElementById(arguments[0]); } //取得外部class的属性值 function getCurrentStyle(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); } var SetAllSelects = { Offset:function(e) { var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight; while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } return {top:t, left:l, width:w, height:h}; }, setCreated:function(obj,status) { //设置属性 obj.setAttribute("childCreated",status); }, getCreated:function(obj) { //获取属性 var status = obj.getAttribute("childCreated"); if(status == null) { status = ""; } return status; }, setSelectStyle:function(obj,idnum,showHeight) { if(obj.id == null || obj.id == "") { obj.id = "selectID_"+idnum; } var offset = this.Offset(obj); obj.style.visibility = "hidden"; var mainDiv = document.createElement("div"); var iDiv = document.createElement("div"); var js_select_; var _this = this; iDiv.className = "iDiv"; iDiv.id = js_select_+obj.id; iDiv.style.width = offset.width + "px"; iDiv.style.top = offset.top + "px"; iDiv.style.left = offset.left + "px"; this.setCreated(iDiv,""); mainDiv.appendChild(iDiv); var tValue = obj.options[obj.selectedIndex].innerHTML; iDiv.innerHTML = tValue; iDiv.onmouseover = function() { iDiv.className = "iDiv iDiv_over"; } iDiv.onmouseout = function() { iDiv.className = "iDiv iDiv_out"; } iDiv.onclick = function() { var created = _this.getCreated(this); if (created != "") { if (created == "open") { this.nextSibling.style.display = "none"; _this.setCreated(this,"close"); } else { _this.setCreated(this,"open"); var arrLiObj = this.nextSibling.getElementsByTagName("li"); var selOjbIndex = 0; for(var i=0;i<arrLiObj.length;i++) { var status = arrLiObj[i].getAttribute("liSelected"); if(status == null) { status = ""; } if(status == "selected") { selOjbIndex = i; break; } } arrLiObj[selOjbIndex].style.background = "#fff"; arrLiObj[selOjbIndex].style.color = "#000"; this.nextSibling.style.display = "block"; } } else { _this.setCreated(this,"open"); var cDiv = document.createElement("div"); cDiv.className = "cDiv"; cDiv.style.width = offset.width + "px"; cDiv.style.height = obj.options.length * 20 + "px"; if(parseInt(cDiv.style.height)>showHeight) { cDiv.style.height = showHeight + "px"; } cDiv.style.top = (offset.top+parseInt(getCurrentStyle(this).height)+1) + "px"; cDiv.style.left = offset.left + "px"; cDiv.onselectstart = function() {return false;}; var uUl = document.createElement("ul"); cDiv.appendChild(uUl); mainDiv.appendChild(cDiv); for (var i=0;i<obj.options.length;i++) { var lLi = document.createElement("li"); lLi.id = obj.options[i].value; lLi.innerHTML = obj.options[i].innerHTML; lLi.sValue = obj.options[i].value; uUl.appendChild(lLi); } var liObj = uUl.getElementsByTagName("li"); if(liObj.length>0) { for (var j=0;j<obj.options.length;j++) { liObj[j].onmouseover = function() { var arrLiObj = this.parentNode.getElementsByTagName("li"); for(var i=0;i<arrLiObj.length;i++) { var status = ""; var _background = "#ccc"; var _color = "#fff"; if(arrLiObj[i] != this) { _background = "#fff"; _color = "#000"; status = "selected"; } arrLiObj[i].style.background = _background; arrLiObj[i].style.color = _color; arrLiObj[i].setAttribute("liSelected",status); } } liObj[j].onclick = function() { obj.options.length = 0; obj.options[0] = new Option(this.innerHTML,this.sValue); this.parentNode.parentNode.style.display = "none"; _this.setCreated(this.parentNode.parentNode.previousSibling,"close"); iDiv.innerHTML = this.innerHTML; }; liObj[0].style.background = "#ccc"; liObj[0].style.color = "#fff"; liObj[0].setAttribute("liSelected","selected"); } } } } document.body.appendChild(mainDiv); }, setAllSelectStyle:function() { var s = document.getElementsByTagName("select"); for (var i=0; i<s.length; i++) { if(s[i].className == "select") { this.setSelectStyle(s[i],i,200); } } } } document.onclick = function(e) { e = e || window.event; var target = e.target || event.srcElement; var s = document.getElementsByTagName("select"); var js_select_; for (var i=0; i<s.length; i++) { if(s[i].className == "select") { var objdivtmp = $(js_select_+s[i].id); var created = SetAllSelects.getCreated(objdivtmp); if (created == "open") { if(target != objdivtmp) { objdivtmp.nextSibling.style.display = "none"; SetAllSelects.setCreated(objdivtmp,"close"); } } } } } window.onload = function() { SetAllSelects.setAllSelectStyle(); } </SCRIPT> <META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD> <BODY> <FORM><SELECT> <OPTION selected>这一只不需要美化</OPTION> <OPTION>选择1_1</OPTION> <OPTION>选择1_2</OPTION></SELECT> <SELECT class=select> <OPTION selected>要美化的就加class</OPTION> <OPTION>选择2_1</OPTION> <OPTION>选择2_22_22_22_2</OPTION> <OPTION>选择2_22_22_22_3</OPTION></SELECT> <BR><BR><BR><SELECT class=select> <OPTION value=3_1 selected>拿这一只来证明取值和取文字都没有问题</OPTION> <OPTION value=3_2>选择3_22_22_22_2</OPTION> <OPTION value=3_3>选择3_22_22_22_3</OPTION> <OPTION value=3_4>选择3_22_22_22_4</OPTION> <OPTION value=3_5>选择3_22_22_22_5</OPTION> <OPTION value=3_6>选择3_22_22_22_6</OPTION> <OPTION value=3_7>选择3_22_22_22_7</OPTION> <OPTION value=3_8>选择3_22_22_22_8</OPTION> <OPTION value=3_9>选择3_22_22_22_9</OPTION> <OPTION value=3_10>选择3_22_22_22_10</OPTION> <OPTION value=3_11>选择3_22_22_22_11</OPTION> <OPTION value=3_12>选择3_22_22_22_12</OPTION> <OPTION value=3_13>选择3_22_22_22_13</OPTION> <OPTION value=3_14>选择3_22_22_22_14</OPTION> <OPTION value=3_15>选择3_22_22_22_15</OPTION> <OPTION value=3_16>选择3_22_22_22_16</OPTION></SELECT> </FORM> <SCRIPT> function getValue() { var kk = document.getElementsByTagName('select')[2]; return kk.options[kk.selectedIndex].value; } function getTxt() { var kk = document.getElementsByTagName('select')[2]; return kk.options[kk.selectedIndex].innerHTML; } </SCRIPT> <BR><BR> <A onclick=alert(getValue()); href="#;">取第三个的值</A> <A onclick=alert(getTxt()); href="#;">取第三个的文本</A> </BODY></HTML>
前一页:
凹陷文字
后一页:
静态页面在文本框中输入数字,表格直接算出相应的结果
相关阅读
四川省中国青年旅行社有限公司总部
css里media属性详解
邓州市途鸿旅行社
windows颜色选择框
javascript正则的用法与示例
诸城市龙马假日旅行社
ASP FSO的一些方法与拥有的属性
深山行者留言系统V2.2 (简称留言板V2.2)
更多信息>>
栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>
同类信息
input文本输入框只能输入数字或字母或汉字等
用于深山在线投票的一个javascript统计checkbox现在选中的个数一边点复选框一边验证并计算现在选了多少个复选框
利用javascript简短功能就可以检查form表单中的元素是否已经填写
javascript日期验证比较
javascript 根据汉字拼音首字母快速定位下拉列表
javascript取汉字拼音首字母缩写程序
更多>>
最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>
随机抽取信息
在网页标题栏上或收藏夹前面显示网站ico小图标的方法
易游天下通-中南国际旅游公司
window.location.href跳转无反应不跳转解决
05 进入深山留言板的后台
使网页右键失效
loading图片
更多标签
热门标签
打字
body
盖楼
逗号
脚本
还原
文本
光标
loading
生成器
js
script
菜单
采集
text
宽
过期
屏幕
outerHTML
例子
彩色
深山
list
pt
li
调节
CSS滤镜
顶部
电影
DIV CSS做的透明菜单兼容IE、FF等
邮箱
链接样式
submit
定制
滚动
mop
执行
窗口
sel 框
rad
左 右 全 input
站长
个人
透明
CAD
csss
深山旅游网站管理系统V1.0
em
插件
中英
免责声明:本站所有资料信息,有部分为本人原创,部分为从网络收集而来,仅供网友查看阅读所用,所有信息版权归信息所有人或所有公司所有
如果信息内容侵犯到您的版权或权益请与我们联系,经确认后我们会立即移除相关内容或链接
Copyright © 2007-2026
深山工作室
All Rights Reserved
服务QQ:
565449214
手机:
13961347334
ICP备案:
苏ICP备15019627号
苏公网安备 32070502010230号