更换select下拉菜单背景样式的实现代码


Posted in Javascript onDecember 20, 2011
<style> 
.uboxstyle{width:174px;height:39px; float:right;} 
#uboxstyle{width:174px;height:39px; float:right;} 
#uboxstyle .select_box{width:174px;height:39px; float:left;} 
#uboxstyle div.tag_select{display:block;color:#79A2BD;width:174px;height:39px;background:transparent url("images/select01.jpg") no-repeat 0 0;padding:0 10px;line-height:39px;} 
#uboxstyle div.tag_select_hover{display:block;color:#79A2BD;width:174px;height:39px;background:transparent url("images/select01.jpg") no-repeat 0 0;padding:0 10px;line-height:39px; } 
#uboxstyle div.tag_select_open{display:block;color:#79A2BD;width:174px;height:39px;background:transparent url("images/select01.jpg") no-repeat 0 0px;padding:0 10px;line-height:39px;} 
#uboxstyle ul.tag_options{padding:0;margin:0;list-style:none;width:174px;padding:0 0 5px;margin:0;} 
#uboxstyle ul.tag_options li{display:block;width:174px;padding:0 10px;height:30px;text-decoration:none;line-height:30px;color:#79A2BD;text-align:left;} 
#uboxstyle ul.tag_options li.open_hover{color:#000} 
#uboxstyle ul.tag_options li.open_selected{color:#000} 
</style> 
<script language="JavaScript"> 
var selects = document.getElementsByTagName('select'); 
var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false; 
function $(id) { 
return document.getElementById(id); 
} 
function stopBubbling (ev) { 
ev.stopPropagation(); 
} 
function rSelects() { 
for (i=0;i<selects.length;i++){ 
selects[i].style.display = 'none'; 
select_tag = document.createElement('div'); 
select_tag.id = 'select_' + selects[i].name; 
select_tag.className = 'select_box'; 
selects[i].parentNode.insertBefore(select_tag,selects[i]); 
select_info = document.createElement('div'); 
select_info.id = 'select_info_' + selects[i].name; 
select_info.className='tag_select'; 
select_info.style.cursor='pointer'; 
select_tag.appendChild(select_info); 
select_ul = document.createElement('ul'); 
select_ul.id = 'options_' + selects[i].name; 
select_ul.className = 'tag_options'; 
select_ul.style.position='absolute'; 
select_ul.style.display='none'; 
select_ul.style.zIndex='999'; 
select_tag.appendChild(select_ul); 
rOptions(i,selects[i].name); 
mouseSelects(selects[i].name); 
if (isIE){ 
selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;"); 
} 
else if(!isIE){ 
selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')"); 
selects[i].addEventListener("click", stopBubbling, false); 
} 
} 
} 
function rOptions(i, name) { 
var options = selects[i].getElementsByTagName('option'); 
var options_ul = 'options_' + name; 
for (n=0;n<selects[i].options.length;n++){ 
option_li = document.createElement('li'); 
option_li.style.cursor='pointer'; 
option_li.className='open'; 
$(options_ul).appendChild(option_li); 
option_text = document.createTextNode(selects[i].options[n].text); 
option_li.appendChild(option_text); 
option_selected = selects[i].options[n].selected; 
if(option_selected){ 
option_li.className='open_selected'; 
option_li.id='selected_' + name; 
$('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML)); 
} 
option_li.onmouseover = function(){ this.className='open_hover';} 
option_li.onmouseout = function(){ 
if(this.id=='selected_' + name){ 
this.className='open_selected'; 
} 
else { 
this.className='open'; 
} 
} 
option_li.onclick = new Function("clickOptions("+i+","+n+",'"+selects[i].name+"')"); 
} 
} 
function mouseSelects(name){ 
var sincn = 'select_info_' + name; 
$(sincn).onmouseover = function(){ if(this.className=='tag_select')this.className='tag_select_hover'; } 
$(sincn).onmouseout = function(){ if(this.className=='tag_select_hover') this.className='tag_select'; } 
if (isIE){ 
$(sincn).onclick = new Function("clickSelects('"+name+"');window.event.cancelBubble = true;"); 
} 
else if(!isIE){ 
$(sincn).onclick = new Function("clickSelects('"+name+"');"); 
$('select_info_' +name).addEventListener("click", stopBubbling, false); 
} 
} 
function clickSelects(name){ 
var sincn = 'select_info_' + name; 
var sinul = 'options_' + name; 
for (i=0;i<selects.length;i++){ 
if(selects[i].name == name){ 
if( $(sincn).className =='tag_select_hover'){ 
$(sincn).className ='tag_select_open'; 
$(sinul).style.display = ''; 
} 
else if( $(sincn).className =='tag_select_open'){ 
$(sincn).className = 'tag_select_hover'; 
$(sinul).style.display = 'none'; 
} 
} 
else{ 
$('select_info_' + selects[i].name).className = 'tag_select'; 
$('options_' + selects[i].name).style.display = 'none'; 
} 
} 
} 
function clickOptions(i, n, name){ 
var li = $('options_' + name).getElementsByTagName('li'); 
$('selected_' + name).className='open'; 
$('selected_' + name).id=''; 
li[n].id='selected_' + name; 
li[n].className='open_hover'; 
$('select_' + name).removeChild($('select_info_' + name)); 
select_info = document.createElement('div'); 
select_info.id = 'select_info_' + name; 
select_info.className='tag_select'; 
select_info.style.cursor='pointer'; 
$('options_' + name).parentNode.insertBefore(select_info,$('options_' + name)); 
mouseSelects(name); 
$('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML)); 
$( 'options_' + name ).style.display = 'none' ; 
$( 'select_info_' + name ).className = 'tag_select'; 
selects[i].options[n].selected = 'selected'; 
} 
window.onload = function(e) { 
bodyclick = document.getElementsByTagName('body').item(0); 
rSelects(); 
bodyclick.onclick = function(){ 
for (i=0;i<selects.length;i++){ 
$('select_info_' + selects[i].name).className = 'tag_select'; 
$('options_' + selects[i].name).style.display = 'none'; 
} 
} 
} 
</script> 
<div style="width:500px;"> 
<form id="form1" name="form1" method="post" action="?Action=Select" style="padding:0px;"> 
<div style="width:200px; float:left; text-align:left; margin-top:8px;"> 
<div id="uboxstyle"> 
<select name="select1" id="language"> 
<option value="1">Cars...</option> 
</select> 
</div> 
</div> 
<div style="width:200px; float:left;text-align:left;margin-top:8px;"> 
<div id="uboxstyle"> 
<select name="select2" id="language2"> 
<option value="">all</option> 
</select> 
</div> 
</div> 
<div style="width:100px; float:left"> 
<input type="submit" name="button" id="button" value="" style="background-image:url(images/selectbt.jpg); width:92px; height:38px; border:0px; cursor:hand;" /> 
</div> 
</form></div>
Javascript 相关文章推荐
关于javascript function对象那些迷惑分析
Oct 24 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
angular.js分页代码的实例
Jul 27 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 #Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 #Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 #Javascript
javascript面向对象编程代码
Dec 19 #Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 #Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 #Javascript
jquery focus(fn),blur(fn)方法实例代码
Dec 16 #Javascript
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
九种原生js动画效果
2015/11/11 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python聊天程序实例代码分享
2013/11/18 Python
浅谈python中get pass用法
2019/03/19 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
写自荐信三大法宝
2014/01/24 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
公司开业庆典主持词
2014/03/21 职场文书
报关报检委托书
2014/04/08 职场文书
初中班主任评语大全
2014/04/24 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
英文版辞职信
2015/02/28 职场文书
2015年幼师工作总结
2015/04/28 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书