不同的浏览器显示的默认下拉框样子不完全相同

作者: 前端  发布:2019-08-28

用JavaScript来标榜HTML的select标签的下拉列表效果,javascriptselect

第一通过三个例证来回看一下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>

然后效果一般时如此的:

9159.com 1

美与丑暂时不论...全部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://www.txnma.com/uploads/allimg/190828/1626262E2-1.jpg" > </ 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://www.txnma.com/uploads/allimg/190828/1626262E2-1.jpg"></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); 

运营代码跟原来的不改变。

首先通过三个例子来回想一下select标签的用法: htmlbodyformselect name="cars"opti...

首先通过一个例证来回想一下select标签的用法:

一.创办贰个本身的dropdownlist
聊到dropdown list,在html中你会想到

一.创办二个体协会和的dropdownlist
说起dropdown list,在html中您会想到

<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>

复制代码 代码如下:

复制代码 代码如下:

下一场效果一般时如此的:

<select>
<option>hello 1</option>
</select>

<select>
<option>hello 1</option>
</select>

9159.com 2

可是它的显得会相当小难堪,大家得以行使div ul来和煦做一个drop down list,并且有十分的苦的slidedown和slideup成效。

可是它的来得会不灾狼狈,大家得以选取div ul来和谐做贰个drop down list,何况有十分苦的slidedown和slideup成效。

美与丑暂时不论...全体html成分中select算是相比较坑爹的八个。他令人抓狂的地点重大是:
 
不等的浏览器呈现的暗许下拉框样子不完全同样
IE下不只怕手动设置select的莫斯中国科学技术大学学(那是最坑爹的!),只能靠font-size撑起来
select左侧的下拉箭头是力不胜任采用背景解决的,那就导致不能使用css实行美化
小结起来,化解办法首要有:

在IE8下的功效相比较:
9159.com 3
首先说说思路,不会细小略的笔触,

在IE8下的作用相比较:
9159.com 4
首先说说思路,很简短的思绪,

将select掩饰掉,而使用div进行效仿
将select发光度设置为0,然后利用相对固化在尘间加多个长得很像select又美化了的div

a. 必要用八个Div来替代drop down list中选中记录突显的不行容器,通过offset来博取这么些Div应该出示的岗位,offtset.top和offset.left。

a. 要求用三个Div来代替drop down list中选中记录突显的十二分容器,通过offset来获取那些Div应该出示的位置,offtset.top和offset.left。

隐形方案一般规律如下:
找到页面供给管理的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上
 
 
先上代码吧:  

b. 通过三个UL以及它的子女们li来模拟下拉框。这里要求留意多少个难题,

b. 通过二个UL以及它的儿女们li来模拟下拉框。这里必要小心多少个难点,

( 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); 

i:供给求把UL放在一个新建好的Div里面,何况以此Div的职分距离top的数量上一步中的Div(大家叫它iDiv)的top iDiv.height;

i:须求求把UL放在二个新建好的Div里面,而且以此Div的地点距离top的数量上一步中的Div(大家叫它iDiv)的top iDiv.height;

 
 
插件代码运转:  

ii:每一次在点击一个li元件后决然要清空它,不然你的drop down list会越来越长。。。

ii:每一回在点击多少个li元件后决然要清空它,不然你的drop down list会越来越长。。。

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(); 
    }); 
  } 
}); 

iii:当鼠标在别的地方点击时,一点要藏匿掉dropdown list。

iii:当鼠标在别的地方点击时,一点要藏匿掉dropdown list。

下面是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://www.txnma.com/uploads/allimg/190828/1626262E2-1.jpg" > </ 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://www.txnma.com/uploads/allimg/190828/1626262E2-1.jpg"></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> 

1.创办iDiv来作为drop down list选中值的容器。 在开创iDiv从前大家须求先来获取要来得这几个drop down list的职责:

1.开立iDiv来作为drop down list选中值的器皿。 在创造iDiv从前我们必要先来获取要体现这几个drop down list的岗位:

非常主流浏览器。
 
 
但也照旧有个基本点的欠缺,在老版本的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(); 
      } 
    }); 
  } 
}); 

// get the select list 's position using offset,width and height
var offset = $(".select_css").offset();
var width = $(".select_css").width();
var height = $(".select_css").height();

// get the select list 's position using offset,width and height
var offset = $(".select_css").offset();
var width = $(".select_css").width();
var height = $(".select_css").height();

接下来,在遮盖的select上加属性autoFix="false":

接下去是创办iDivb并采纳css()方法来为iDiv增多格式。

接下去是开创iDivb并动用css()方法来为iDiv增多格式。

< 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移除
代码如下:  

var iDiv = $("<Div id='iDiv' class='iDiv'>").css({
'top': offset.top,
'left': offset.left,
'width': width,
'height': height,
'border': '1px solid #aaaaaa',
'fontSize': '12px',
'textIndent': '4px',
'cursor': 'default' }).text("hello");

var iDiv = $("<Div id='iDiv' class='iDiv'>").css({
'top': offset.top,
'left': offset.left,
'width': width,
'height': height,
'border': '1px solid #aaaaaa',
'fontSize': '12px',
'textIndent': '4px',
'cursor': 'default' }).text("hello");

//加上隐藏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); 

iDiv也给加了个class='iDiv',本来不要求的,可是后来本身意识jQuery的css()不可能去搞定背景图片的no-repeat 属性,google了半天老外也从没例子,所以唯有经过这一个clas='iDiv'来设定:

iDiv也给加了个class='iDiv',本来无需的,可是后来自身开掘jQuery的css()不或许去解决背景图片的no-repeat 属性,google了半天老外也从未例子,所以独有通过那几个clas='iDiv'来设定:

运维代码跟原本的不改变。

复制代码 代码如下:

复制代码 代码如下:

你或然感兴趣的小说:

  • javascript生成img标签的3种完毕方式(对象、方法、html)
  • javascript给span标签赋值的法子
  • javascript落实动态标签云
  • JavaScript常用竹签和措施总括
  • 浏览器境遇下JavaScript脚本加载与执行探析之defer与async性情
  • js的[defer]和[async]属性
  • JS中script标签defer和async属性的界别详解

.iDiv
{
background-image:url('images/select_right.gif');
background-position:right;
background-repeat:no-repeat;
}

.iDiv
{
background-image:url('images/select_right.gif');
background-position:right;
background-repeat:no-repeat;
}

效果与利益如下;
9159.com 5
2.在iDiv发生点击事件时,来创建贰个下拉框,并使用slidedown效果。
先是大家须要成立贰个cDiv并把它增添到html的body,它的职位正好是在iDiv的上边,所以必要cDiv的始建如下:

功能如下;
9159.com 6
2.在iDiv发生点击事件时,来创建五个下拉框,并选拔slidedown效果。
先是咱们要求创建二个cDiv并把它增多到html的body,它的职位正好是在iDiv的上面,所以须求cDiv的开创如下:

复制代码 代码如下:

复制代码 代码如下:

var cDiv = $("<div id='cDiv'>").css({
'position': 'absolute',
'width': width,
'top': offset.top 22,
'left': offset.left,
'background': '#f7f7f7',
'border': '1px solid silver'
}).hide();

var cDiv = $("<div id='cDiv'>").css({
'position': 'absolute',
'width': width,
'top': offset.top 22,
'left': offset.left,
'background': '#f7f7f7',
'border': '1px solid silver'
}).hide();

还要暗中同意大家要它遮盖掉。

同有时候默许我们要它遮盖掉。

有了这些cDiv,大家只需求在iDiv爆发Click事件时创建三个UL列表,并把它append倒cDiv。

有了那些cDiv,大家只须求在iDiv产生Click事件时成立二个UL列表,并把它append倒cDiv。

复制代码 代码如下:

复制代码 代码如下:

var UL = $("<ul style='list-style:none;margin:0;padding:0;'></ul>").appendTo(cDiv);
for (var i = 1; i < 10; i ) {
$("<li style='testIndent:4px;height:20px;lineheight:20px; cursor:pointer;'>").appendTo(UL).text("hello" i).mouseover(function () {
$(this).css(
{
'color': 'white',
'background': 'gray'
}
);
}).mouseout(function () {
$(this).css(
{
'color': 'black',
'background': 'white'
});
}).click(function () {
// disvisualble the cDiv and set the selected crrent li's text as iDiv's text
$("#cDiv").slideUp().hide();
$("#iDiv").html($(this).html());
});
}
// slide show the cDiv now
$("#cDiv").slideDown('slow');

var UL = $("<ul style='list-style:none;margin:0;padding:0;'></ul>").appendTo(cDiv);
for (var i = 1; i < 10; i ) {
$("<li style='testIndent:4px;height:20px;lineheight:20px; cursor:pointer;'>").appendTo(UL).text("hello" i).mouseover(function () {
$(this).css(
{
'color': 'white',
'background': 'gray'
}
);
}).mouseout(function () {
$(this).css(
{
'color': 'black',
'background': 'white'
});
}).click(function () {
// disvisualble the cDiv and set the selected crrent li's text as iDiv's text
$("#cDiv").slideUp().hide();
$("#iDiv").html($(this).html());
});
}
// slide show the cDiv now
$("#cDiv").slideDown('slow');

能够看看在累加每条li记录时都为它增加了mouseover,mouseout和click事件。

能够看出在丰硕每条li记录时都为它加多了mouseover,mouseout和click事件。

在click事件发生时,大家不但要把cDiv给slideUp还索要把它隐蔽掉,并且在下一次点击iDiv以前先清空cDiv。这两点非常重大。你能够尝试不做这两点时会现身什么效果。

在click事件时有产生时,大家不光要把cDiv给slideUp还须求把它掩饰掉,并且在后一次点击iDiv在此之前先清空cDiv。这两点相当重大。你可以推行不做这两点时会出现什么样意义。

在click li时别忘了把这段日子li的html内容复制给iDiv,不然大家的控件就没实效与利益啦。。。。。

在click li时别忘了把当下li的html内容复制给iDiv,不然大家的控件就没实际职能啦。。。。。

3.行使Ajax从服务器获取下拉列表的值。
多数时候大家需求动态的从服务器获取下拉列表的值,那样就须求在点击iDiv时先通过jQuey的ajax方法(只怕其余的ajax方法)从服务器load数据,在数量load达成时大家才伊始创办UL列表。

3.用到Ajax从服务器获取下拉列表的值。
非常多时候我们需求动态的从服务器获取下拉列表的值,那样就须要在点击iDiv时先通过jQuey的ajax方法(只怕其余的ajax方法)从服务器load数据,在数码load完成时大家才起来创造UL列表。

自己这里运用的是WCF Servece作为ajax乞求的数据源。

自个儿那边运用的是WCF Servece作为ajax需求的数据源。

   9159.com 7

   9159.com 8

为了充实客商本人型,在从服务器取数据时,大家让iDiv显示为三个load的图片。。。。。。。。。。。。

为了充实客商自个儿型,在从劳动器取数据时,大家让iDiv呈现为一个load的图纸。。。。。。。。。。。。

9159.com 9

9159.com 10

代码下载:

代码下载:

二.利用jQuery的append成效来无刷新切换播放的摄像文件(flash或Silverlight播放器)。

此前有个minisite要求用到这几个事物。作者就试着商讨了下,还真行的通。

大家能够看一下。作者那一个不算做广告吗,我们基本都是男的大致不会看这几个的。呵呵。只是那一个法子本身认为您大概今后能够用到的。

鉴于这么些播放器都以二个embed控件,所以大家能够透过替换embed的src属性来播放不一致的摄像。举例:

9159.com 11

选拔jQuery的append()方法我们来个改头换面,就能够把embed的src给换掉,并再一次把div1的html给换掉,在页面上就像使用ajax能力。

复制代码 代码如下:

$("#div1 embed").empty();
var placeHolder = $("<div />");
var tempParent = $("<div />");
var embed = $("#div1 embed");
embed.replaceWith(placeHolder);
tempParent.append(embed);
embed.attr("src", );
placeHolder.replaceWith(tempParent.html());

三.用jQuery来为HTML实现header和footer功能。 在php,asp.net中都有header和footer这种控件,php中用include,而在asp.net中大家用master大概是ascx都行。

在html中吗?笔者信任一向未有。不过客户须求咱们做的页面必需是html,说是怕客商太多。。。。。

用footer和header的益处正是当必要修改这么些有个别的故事情节时,我们只须要修改三个页面,全数的页面就都会转换。

后来找到个点子是选用jquery的load()方法。

第一我们须求在html中加多五个Div一个在<body>的最上面,一个在最上边,最棒是贰个Id='header',二个id='footer'。

下一场在劳动器端大家只必要创制三个header.html和八个footer.html。

在页面加载时大家会用jquery的load方法来loadheader.html和footer.html。

9159.com 12
9159.com,代码:

复制代码 代码如下:

$("#header").load("controls/header.html", function (response, status, xhr) {
if (status == "error") {
var msg = "服务器数据传输错误,请刷新页面";
// $("#error").html(msg xhr.status " " xhr.statusText);
alert(msg);
}
});
// load footer from server
$("#footer").load("controls/footer.html", function (response, status, xhr) {
if (status == "error") {
var msg = "服务器数据传输错误,请刷新页面";
// $("#error").html(msg xhr.status " " xhr.statusText);
alert(msg);
}
});

前边有异常的大恐怕的话笔者会接着总括点jQuery的本领和豪门享用。。。。。。。。还或者有特别下拉框的代码作者稍后给我们提供下载地址。
Cheers
Nic  
代码下载:

谈起dropdown list,在html中你会想到 复制代码 代码如下: select optionhello 1/option /select 然而它的显得会不灾狼狈,作者...

二.施用jQuery的append效率来无刷新切换播放的摄像文件(flash或Silverlight播放器)。

从前有个minisite供给用到那几个东西。笔者就试着钻探了下,还真行的通。

大家能够看一下。笔者那一个不算做广告吗,我们基本都以男的大约不会看那一个的。呵呵。只是这几个措施本身感到您或然今后能够用到的。

出于那个播放器都以三个embed控件,所以大家得以因而替换embed的src属性来播放分化的录像。比方:

9159.com 13

采纳jQuery的append()方法我们来个改头换面,就可以把embed的src给换掉,并再一次把div1的html给换掉,在页面上就如使用ajax手艺。

复制代码 代码如下:

$("#div1 embed").empty();
var placeHolder = $("<div />");
var tempParent = $("<div />");
var embed = $("#div1 embed");
embed.replaceWith(placeHolder);
tempParent.append(embed);
embed.attr("src", );
placeHolder.replaceWith(tempParent.html());

三.用jQuery来为HTML实现header和footer功能。 在php,asp.net中都有header和footer这种控件,php中用include,而在asp.net中大家用master恐怕是ascx都行。

在html中吗?小编信任平素未有。可是客商需要咱们做的页面必需是html,说是怕客商太多。。。。。

用footer和header的好处便是当要求修改那么些片段的从头到尾的经过时,大家只要求修改多个页面,全部的页面就都会调换。

新生找到个措施是选用jquery的load()方法。

先是大家供给在html中增添多少个Div多个在<body>的最上边,二个在最上边,最佳是二个Id='header',三个id='footer'。

下一场在劳动器端大家只须求创建三个header.html和三个footer.html。

在页面加载时大家会用jquery的load方法来loadheader.html和footer.html。

9159.com 14
代码:

复制代码 代码如下:

$("#header").load("controls/header.html", function (response, status, xhr) {
if (status == "error") {
var msg = "服务器数据传输错误,请刷新页面";
// $("#error").html(msg xhr.status " " xhr.statusText);
alert(msg);
}
});
// load footer from server
$("#footer").load("controls/footer.html", function (response, status, xhr) {
if (status == "error") {
var msg = "服务器数据传输错误,请刷新页面";
// $("#error").html(msg xhr.status " " xhr.statusText);
alert(msg);
}
});

末尾有十分的大可能率的话作者会接着总括点jQuery的技能和豪门享受。。。。。。。。还有特别下拉框的代码小编稍后给大家提供下载地址。
Cheers
Nic  
代码下载:

本文由9159.com发布于前端,转载请注明出处:不同的浏览器显示的默认下拉框样子不完全相同

关键词: 9159.com