网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
网页制作
>
js教程
> >
js获取select选中的值_JS美化select选择框
js获取select选中的值_JS美化select选择框
发布时间:2016-07-10
【www.gdgbn.com--js教程】
提示:您可以先修改部分代码再运行
用javascript美化Select
<script type="text/javascript"> var childCreate=false; function Offset(e) //取标签的绝对位置 { var t = e.offsetTop; var l = e.offsetLeft; var w = e.offsetWidth; var h = e.offsetHeight-2; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } return { top : t, left : l, width : w, height : h } } function loadSelect(obj){ //第一步:取得Select所在的位置 var offset=Offset(obj); //第二步:将真的select隐藏 obj.style.display="none"; //第三步:虚拟一个div出来代替select var iDiv = document.createElement("div"); iDiv.id="selectof" + obj.name; iDiv.style.position = "absolute"; iDiv.style.width=offset.width + "px"; iDiv.style.height=offset.height + "px"; iDiv.style.top=offset.top + "px"; iDiv.style.left=offset.left + "px"; iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px"; iDiv.style.border="1px solid #3366ff"; iDiv.style.fontSize="12px"; iDiv.style.lineHeight=offset.height + "px"; iDiv.style.textIndent="4px"; document.body.appendChild(iDiv); //第四步:将select中默认的选项显示出来 var tValue=obj.options[obj.selectedIndex].innerHTML; iDiv.innerHTML=tValue; //第五步:模拟鼠标点击 iDiv.onmouseover=function(){//鼠标移到 iDiv.style.background="url(/articleimg/2007/04/4687/icon_select_focus.gif) no-repeat right 4px"; } iDiv.onmouseout=function(){//鼠标移走 iDiv.style.background="url(/articleimg/2007/04/4687/icon_select.gif) no-repeat right 4px"; } iDiv.onclick=function(){//鼠标点击 if (document.getElementById("selectchild" + obj.name)){ //判断是否创建过div if (childCreate){ //判断当前的下拉是不是打开状态,如果是打开的就关闭掉。是关闭的就打开。 document.getElementById("selectchild" + obj.name).style.display="none"; childCreate=false; }else{ document.getElementById("selectchild" + obj.name).style.display=""; childCreate=true; } }else{ //初始一个div放在上一个div下边,当options的替身。 var cDiv = document.createElement("div"); cDiv.id="selectchild" + obj.name; cDiv.style.position = "absolute"; cDiv.style.width=offset.width + "px"; cDiv.style.height=obj.options.length *20 + "px"; cDiv.style.top=(offset.top+offset.height+2) + "px"; cDiv.style.left=offset.left + "px"; cDiv.style.background="#f7f7f7"; cDiv.style.border="1px solid silver"; var uUl = document.createElement("ul"); uUl.id="uUlchild" + obj.name; uUl.style.listStyle="none"; uUl.style.margin="0"; uUl.style.padding="0"; uUl.style.fontSize="12px"; cDiv.appendChild(uUl); document.body.appendChild(cDiv); childCreate=true; for (var i=0;i
select{width:200px;height:20px;}
用javascript模拟select达到美化效果
用户注册
帐号
密码
word" name="pwd" id="pwd" />
省份
江西
福建
广东
浙江
<script type="text/javascript"> loadSelect(document.f.province); </script>
作者博客
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/wangyezhizuo/12240/
上一篇:
[图片轮换js代码]图片轮换 淡入淡出
下一篇:
json|js onmouserover控制图片
相关推荐
常用css页面布局方式_常用CSS页面布局
坐则高谈风月|左则导行菜单
现代女性频道|新浪女性频道图片轮换效果
[图片轮换js代码]图片轮换 淡入淡出
json|js 图片按秒轮换效果
【非主流照片男生】非主流照片处理
【json】js 菜单申缩效果
[滑动菜单插件]滑动菜单
淘宝联盟|阿里妈妈的商城分类效果一
css模仿select_css模仿select下拉列表
网友关注
[asp生成验证码代码]asp生成验证码
超酷网页视频播放器 下载_超酷css 菜单
【淘宝联盟】阿里妈妈的商城分类效果
[sql server]SQL Server与Oracle并行访问的区别
google学术搜索|模仿Google的搜索提示框
【在线调试服务器】在线调试服务端js代码的asp源码
中英文双语版简历_中英文双语导航菜单
所见非所得_过滤所见所得编辑器里的危险脚本二
json|js 滑块
qq表情放大代码_图片放大代码
热门标签
最新js教程
js教程
js遍历对象_js中查找对象代码
js教程
javascript学习指南_java 自动装箱拆箱实现方法
js教程
eclipse连接mysql数据库_java连接db2数据代码
js教程
flash player|flash js Fusioncharts 参数详解与参考
js教程
json_js ajax XMLHttpRequest与jq $.ajax
js教程
【js利用cookie】js利用cookies与正则设置字体高亮显示
js教程
asp.net core_asp.net DataGridTree 下拉树 实现方法
js教程
[jsp注册页面代码]JSP页面编码问题分析
js教程
[hibernate和mybatis的区别]Hibernate 中get()和load()与Hibernate简介
js教程
判断textarea中是否有回车符|判断textarea中是否有回车符方法
js教程热门文章
js教程
json|js onmouserover控制图片
js教程
phpstudy_php cookie cn域名规范
js教程
【学好普通话】学好PHP,try your best
js教程
【php简单日历代码】PHP简单日历实例
js教程
[phpwindows下使用怎么解决]PHP:windows下使用zend studio及相关产品搭建php调试环境
js教程
学php需要多久|PHP的学习
js教程
【php调用js文件的好处】php调用js文件的好办法
js教程
php if and|php+javascript 静态化简单实例
js教程
layer弹出层_layer and tables question?
js教程
[json]js 放大镜 放大镜 代码
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有