更换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字符串拼接的效率问题
Dec 25 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 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验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
详解JS函数重载
2014/12/04 Javascript
Vue表单实例代码
2016/09/05 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python中属性和描述符的正确使用
2016/08/23 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python实现简单加密解密机制
2019/03/19 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
python基于socket函数实现端口扫描
2020/05/28 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
css3隔行变换色实现示例
2014/02/19 HTML / CSS
PHP开发的一般流程
2013/08/13 面试题
目标管理责任书
2014/04/15 职场文书
初中新生军训方案
2014/05/13 职场文书
卖房协议书样本
2014/10/30 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
python热力图实现的完整实例
2022/06/25 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python