更换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 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 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中取得URL的根域名的代码
2011/03/23 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
python制作mysql数据迁移脚本
2019/01/01 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
个性车贴标语
2014/06/24 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
Python实现数据的序列化操作详解
2022/07/07 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技