首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用JavaScript来美化HTML的select标签的下拉列表效果

Posted in Javascript onNovember 17, 2015

首先通过一个例子来回顾一下select标签的用法：

<html>

<body>

<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

然后效果一般时这样的：

用JavaScript来美化HTML的select标签的下拉列表效果

美与丑暂且不论...所有html元素中select算是比较坑爹的一个。他让人抓狂的地方主要是：
 
不同的浏览器显示的默认下拉框样子不完全相同
IE下无法手动设置select的高度（这是最坑爹的！），只能靠font-size撑起来
select右侧的下拉箭头是无法使用背景消除的，这就导致无法使用css进行美化
总结起来，解决办法主要有：

将select隐藏掉，而使用div进行模拟
将select透明度设置为0，然后使用相对定位在下方 加一个长得很像select又美化了的div

隐藏方案一般原理如下：
找到页面需要处理的select，将其隐藏
根据select的option，创建一个li列表（当然也可以是div），并隐藏。
在select的位置创建一个div，显示select的值（selected的option）。并使用css对其进行美化，使其看起来像一个select
添加事件，使点击“select”的时候，显示li列表。并使用相对定位，让这个列表显示在“select”下方
对li列表添加事件，模拟下拉框的选值过程（点击事件和键盘↑↓事件都要模拟）
选值完成后，要将选的值显示到上方的“select”，并设置真正的select的值
当然，如果你想做的更复杂点，还可以添加选项搜索、多选、多选后的选项删除等。当时一般原理都跟上面差不多。网上也有很多这样的插件。但使用网上的插件要注意测试浏览器的兼容性，功能越复杂的模拟select，兼容性越不好做
 
如果，你的程序不需要那么复杂的select，那么设置透明度的第二种方案也许适合你。今天要分享给大家的也是这个方案。
它的原理如下：
 
 
找到当前页面的select，将其透明度设置为0.使其看不见，但是可以点击并选值
创建一个div，使用相对定位，放置到select下方 ，并通过css控制使其看起来像一个select。为什么一定要放在下方呢？因为这样，我们可以点击真正的select，而用户看起来像是点击的这个模拟的select，因为真正的select是完全透明的。如果放置在上方，则用户点击的是这个模拟的select，真正的select不会展开！！！
设置div的text为select的值
添加事件，使真正的select选值后，将值显示到模拟的div上
 
 
先上代码吧：
 

( function ($){
var selectFix= function (){
var select=$( this );
//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
$(select).css({
"opacity" :0
});
//找到select的选项
var sOptions= this .get(0).options;
//设置模拟select的值
var setFixDivText= function (selectValue){
var text= "" ;
for ( var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if (option.value==selectValue){
text=$(option).text();
break ;
}
}
return text;
};
//模拟的select
//初始化时要将select的值传入
var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" >'+setFixDivText($(select).val())+ '</div>' );
select.after(selectFixDiv);
var left=$(select).offset().left;
var top=$(select).offset().top-1; //因为一般select都有1px的边框，所以这里往上拉1px
$(selectFixDiv).css({
"top" : top,
"left" : left
});
//select选值时，将值显示到模拟的select上
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
};
$.fn.selectFix=selectFix;
})(jQuery);
(function($){ 
  var selectFix=function(){ 
    var select=$(this); 
    //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 
    $(select).css({ 
      "opacity":0 
    }); 
    //找到select的选项 
    var sOptions=this.get(0).options; 
    //设置模拟select的值 
    var setFixDivText=function(selectValue){ 
      var text=""; 
      for(var i=0;i<sOptions.length;i++){ 
        var option=sOptions[i]; 
        if(option.value==selectValue){ 
          text=$(option).text(); 
          break; 
        } 
      } 
      return text; 
    }; 
 
    //模拟的select 
    //初始化时要将select的值传入 
    var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix">'+setFixDivText($(select).val())+'</div>'); 
    select.after(selectFixDiv); 
 
    var left=$(select).offset().left; 
    var top=$(select).offset().top-1;//因为一般select都有1px的边框，所以这里往上拉1px 
    $(selectFixDiv).css({ 
      "top" : top, 
      "left" : left 
    }); 
     
    //select选值时，将值显示到模拟的select上 
    $(select).bind("change click",function(){ 
      $(selectFixDiv).text(setFixDivText($(this).val())); 
    }); 
  }; 
  $.fn.selectFix=selectFix; 
})(jQuery);

 
 
插件代码运行：
 

jQuery(document).ready( function () {
var selects=$( "select.selectInput" );
if (selects.length){
selects.each( function (){
$( this ).selectFix();
});
}
});

jQuery(document).ready(function() { 
  var selects=$("select.selectInput"); 
  if(selects.length){ 
    selects.each(function(){ 
      $(this).selectFix(); 
    }); 
  } 
});

下面是html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > New Document </ TITLE >
< META NAME = "Generator" CONTENT = "EditPlus" >
< META NAME = "Author" CONTENT = "" >
< META NAME = "Keywords" CONTENT = "" >
< META NAME = "Description" CONTENT = "" >
< script type = text /javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > </ script >
< script type = text /javascript src = "temp.js" > </ script >
< style >
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;}
.dn {display: none;}
select{cursor: pointer;}
input,
select,
textarea,
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;}
.formText,
.selectInput,
.text,
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}
</ style >
</ HEAD >
< BODY >
< div id = "main" >
< select id = "sex" class = "selectInput" name = "sex" >
< option value = "0" > 男 </ option >
< option value = "1" > 女 </ option >
</ select >
</ div >
</ BODY >
</ HTML >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
 <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
 <script type=text/javascript src="temp.js"></script> 
 
 <style> 
html {font-family: "宋体";font-size: 12px;line-height: 25px;color: #6F6F6F;} 
.dn {display: none;} 
select{cursor: pointer;} 
input, 
select, 
textarea, 
.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression(this.hideFocus=true); outline: none;} 
.formText, 
.selectInput, 
.text, 
.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;} 
.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;} 
.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;} 
 </style> 
</HEAD> 
 
<BODY> 
<div id="main"> 
  <select id="sex" class="selectInput" name="sex"> 
    <option value="0">男</option> 
    <option value="1">女</option> 
  </select> 
</div> 
</BODY> 
</HTML>

兼容主流浏览器。
 
 
但也还是有个重大的缺陷，在老版本的ie中，真正select的高度还是无法撑开。所以，用户点击模拟的select的靠下方的位置会发现select无法展开！！
不过设计的艺术在于平衡，如果你无法忍受这个缺陷，可以使用第一种解决方案。
 
 
另外，在测试后，发现如果select处于一个隐藏的容器中，那么显示后，select的位置是一个空白！！
这是怎么回事呢？！
原来，html元素隐藏后是无法获取他的屏幕坐标的！！！ 所以这时候显示出来，真正的select完全透明了，而模拟的select跑到屏幕的左上角去了。因为他获取select的坐标为（0,0）
 
 
不要着急，这个问题有下面的解决办法：
1、单独写代码触发select的美化程序
首先，你需要将上面的美化程序运行代码做以下修改：
 

jQuery(document).ready( function () {
var selects=$( "select.selectInput" );
if (selects.length){
selects.each( function (){
if (!($( this ).attr( "autoFix" )== "false" )){
$( this ).selectFix();
}
});
}
});

jQuery(document).ready(function() { 
  var selects=$("select.selectInput"); 
  if(selects.length){ 
    selects.each(function(){ 
      if(!($(this).attr("autoFix")=="false")){ 
        $(this).selectFix(); 
      } 
    }); 
  } 
});

然后，在隐藏的select上加属性autoFix="false"：

< select id = "sex" class = "selectInput" name = "sex" autoFix = "false" >
< option value = "0" > 男 </ option >
< option value = "1" > 女 </ option >
</ select >

<select id="sex" class="selectInput" name="sex" autoFix="false"> 
    <option value="0">男</option> 
    <option value="1">女</option> 
  </select>

然后，在外部容器显示的时候，手动调用$("#sex").selectFix()
 
2、如果容器的显示或者隐藏是第三方插件控制，修改不方便可考虑下面的方案：
在美化程序中，先判断select是否隐藏，如果否逻辑不变，如果隐藏，则加入一个timer，循环判断元素是否被显示，在其显示的时候再自动调用fix，然后将timer移除
代码如下：
 

//加上隐藏select的操作
( function ($){
var selectFix= function (){
var select=$( this );
//设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题
$(select).css({
"opacity" :0
});
if (!select.is( ":hidden" )){
var sOptions= this .get(0).options;
var setFixDivText= function (selectValue){
var text= "" ;
for ( var i=0;i<sOptions.length;i++){
var option=sOptions[i];
if (option.value==selectValue){
text=$(option).text();
break ;
}
}
return text;
};
var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" status= "close" >'+setFixDivText($(select).val())+ '</div>' );
select.after(selectFixDiv);
var selectWidth=$(select).innerWidth();
var selectFixDivWidth=$(selectFixDiv).innerWidth();
var left=$(select).offset().left;
var top=$(select).offset().top-1;
$(selectFixDiv).css({
"top" : top,
"left" : left,
"margin" : 0
});
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
} else {
var tasks = function (){
if (!$(select).is( ":hidden" )){
$(select).selectFix();
clearInterval(timer);
}
};
var timer=setInterval(tasks,500)
}
};
$.fn.selectFix=selectFix;
})(jQuery);
//加上隐藏select的操作 
(function($){ 
  var selectFix=function(){ 
    var select=$(this); 
    //设置透明度为0 当然你也可以使用css控制 使用Jquery设置透明度可以屏蔽 透明度的 浏览器兼容性问题 
    $(select).css({ 
      "opacity":0 
    }); 
 
    if(!select.is(":hidden")){ 
      var sOptions=this.get(0).options; 
 
      var setFixDivText=function(selectValue){ 
        var text=""; 
        for(var i=0;i<sOptions.length;i++){ 
          var option=sOptions[i]; 
          if(option.value==selectValue){ 
            text=$(option).text(); 
            break; 
          } 
        } 
        return text; 
      }; 
 
      var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix" status="close">'+setFixDivText($(select).val())+'</div>'); 
      select.after(selectFixDiv); 
 
      var selectWidth=$(select).innerWidth(); 
      var selectFixDivWidth=$(selectFixDiv).innerWidth(); 
      var left=$(select).offset().left; 
 
      var top=$(select).offset().top-1; 
      $(selectFixDiv).css({ 
        "top" : top, 
        "left" : left, 
        "margin" : 0 
      }); 
 
      $(select).bind("change click",function(){ 
        $(selectFixDiv).text(setFixDivText($(this).val())); 
      }); 
    }else{ 
      var tasks = function(){ 
        if(!$(select).is(":hidden")){ 
          $(select).selectFix(); 
          clearInterval(timer); 
        } 
      }; 
      var timer=setInterval(tasks,500) 
    } 
  }; 
  $.fn.selectFix=selectFix; 
})(jQuery);

运行代码跟原来的不变。

用JavaScript来美化HTML的select标签的下拉列表效果

- Author -

snoopy7713

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
JS实现处理时间，年月日，星期的公共方法示例
May 31 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 #Javascript
jquery实现简单的表单验证
Nov 17 #Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 #Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 #Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 #Javascript
jquery判断密码强度的验证代码
Apr 22 #Javascript
jquery实现邮箱自动填充提示功能
Nov 17 #Javascript
德劲1103(3) 台湾(1) 松下(1) SRF-S83(1) 根德(2) ICF-SW7600GR(1) Panasonic(1) SRF-S84(1) PL660(1) ICF-SW55(1)
You might like
php循环输出数据库内容的代码
2008/05/24 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
新闻内页-JS分页
2006/06/07 Javascript
js异或加解密效果代码
2008/06/25 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js，jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码，让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
javascript常用的方法整理
2015/08/20 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python获取指定时间差的时间实例详解
2017/04/11 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
加拿大最大的箱包及旅游配件零售商：Bentley Leathers
2017/07/19 全球购物
英国在线发型和美容产品商店：Beauty Cutie
2019/04/27 全球购物
俄罗斯设计师家具购物网站：The Furnish
2019/12/01 全球购物
linux面试题参考答案（5）
2014/09/01 面试题
医学生个人求职信范文
2013/09/24 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
公司年终奖分配方案
2014/06/16 职场文书
法英专业大学生职业生涯规划范文：衡外情，量己力！
2014/09/23 职场文书
2014年老干部工作总结
2014/11/21 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript