代码(基于jQuery):
解决思路:
- 当鼠标移到select元素时将其宽度置为auto;
- 鼠标移开时恢复为原定宽度。
方法一:
$(function() {
$(".ProductAttributesSelect")
.mouseover(function(){
$(this)
.data("origWidth", $(this).css("width"))
.css("width", "auto");
})
.mouseout(function(){
$(this).css("width", $(this).data("origWidth"));
});
});
方法二:
<script type="text/javascript"> jQuery(function($){ var el; $("select").each(function() { el = $(this); el.data("origWidth", el.css("width")); // el.data("oriWidth",85); }) .focusin(function(){ el=$(this); el.css("width", "auto"); //if(el.width() < el.data("oriWidth")){ // el.css("width", el.data("origWidth")); //} }) .bind("blur change ", function(){ el = $(this); el.css("width", el.data("origWidth")); }); }); </script>