更换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代码
Nov 10 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Django ModelForm组件原理及用法详解
2020/10/12 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
18岁生日感言
2014/01/12 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
销售团队激励口号
2014/06/06 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python