Question

jquery怎么优化 下拉菜单效果

Answer 1

下拉菜单的默认样式在不同类型的浏览器中显示的效果非常不同，单纯的用css来统一样式可能非常有局限性，使用Jquery+css优化起来不但简单，而且实用性也非常广，主要原理为设置select透明度为0，利用css样式把span美化成select的样式，利用jquery把select选择的option的值传给span。

下面就是jquery优化下拉菜单效果的具体实现代码：

Html

<a class="btn-select">
  <span class="cur-select">请选择</span>
   <select class="form-control">
  <option>这是IE浏览器下的默认显示效果</option>
  <option>这是Firefox浏览器下的默认显示效果</option>
  <option>这是Opera浏览器下的默认显示效果</option>
  <option>这是chrome浏览器下的默认显示效果</option>
</select>
</a>

CSS

.btn-select { 
position: relative; 
display: block; 
height:30px;
line-height: 30px; 
border:1px solid #ccc;
color:#3D3F42;
} 
.btn-select .cur-select { 
position: absolute; 
display: block; 
width: 100%; 
height: 25px; 
line-height: 25px; 
background:url(/Themes/Employee/Content/images/ico.png) no-repeat 98% 45% transparent; 
text-indent: 10px; 
}
.searchInselectW .store-selector .btn-select:hover{
    background:#fff;
    color:#3D3F42;
}
.btn-select:hover, .cur-select:hover {
color:#3D3F42;
}
.btn-select select { 
position:absolute;
top:0;
left:0;
height:30px;
opacity:0;
filter:alpha(opacity=0);
} 
.btn-select select option { 
text-indent: 10px; 
} 
.btn-select select option:hover { 
color: #fff; 
}

Jquery

$(function(){
    $(document).on("change", function() {
        $("select").each(function() {
            var $selectText = $(this).children("option:selected").text();
            $(this).parent().find("span").text($selectText);
        });
    }); 
}