更换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代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
简谈创建React Component的几种方式
Jun 15 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 学习资料零碎东西
2010/12/04 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
vue如何截取字符串
2019/05/06 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python实现大文件排序的方法
2015/07/10 Python
python实现将内容分行输出
2015/11/05 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
简单说说tomcat的配置
2013/05/28 面试题
年终自我鉴定
2013/10/09 职场文书
企业文化建设实施方案
2014/03/22 职场文书
村委会换届选举方案
2014/05/03 职场文书
建筑工地质量标语
2014/06/12 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
采购部年度工作总结
2015/08/13 职场文书
企业文化学习心得体会
2016/01/21 职场文书
导游词之唐山景点
2019/12/18 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers