老项目要维护一个功能,页面的下拉框为了显示美观,宽度都固定了,导致一些长文本显示不全。要求IE6及其以上版本、火狐兼容,不能破坏原来布局。
本来用的是title属性,效果好修改简单,可惜破IE6不支持option的title属性。 以下例子是用滚动条控制的,可以给大家一个思路。
1.本示例基于Jquery,首先导入jquery库。
2.代码如下:
<html>
<head>
<title>lei_00'blog</title>
<style>
.frm270{ width:270px; }
</style>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body>
<div id="selectDiv" style="width:270px;overflow-x:hidden;background:#00FF00">
<select name="lei_00" id="lei_00" >
<option >ppoopoosss</option>
<option >asdfasdsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</option>
<option >asdfasfjwqefjaksjfjklasflaskjdfljasjfkljaskldflajfdladfl</option>
<option >dddddddddddddddddddddddddd</option>
<option >dddddddddddddddddddddddddddddddddd</option>
<option >Gdddddddddddddddddddddddddddddddddddddddderechtigt</option>
<option >Gesggggggggggggggggggggggggggggggglprokura)</option>
<option >Kogsssssssssssssssssssssssssssssssokura)</option>
<option >Kommdddddddddddddddddddddddddddddddddura)</option>
<option >Prosssssssssssssssssssssssssssssssssssssssssssssssssten)</option>
<option >ProppppppppppppppppppdddddddddddddddddddddddddddddddddddddddddddddddddddGF)</option>
<option >Gesjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjkura)</option>
<option >Gejjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjuristen</option>
<option >opehhhhhhhhhhhhhh</option>
<option >opehhhhhhhhhhhhh</option>
<option >operahhhhhhhhhhhhhhhhhhhhhhhhhhhh</option>
<option >Geschhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhigt</option>
<option >Geschhhhhhhhhhhhhhhhhhhhhhhgt</option>
</select>
</div>
<script type="text/javascript">
jQuery(function($) {
$("#lei_00").addClass("frm270");
});
var flag=true;
$("#lei_00").mouseover(
function () {
$(this).css({width:"auto"});
flag=true;
}
);
$("#lei_00").change(
function () {
$(this).css({width:"270px"});
flag=false;
}
);
$("#lei_00").mouseout(
function () {
if(flag){
$(this).css({width:"270px"});
}
}
);
$("#lei_00").mousedown(
function () {
if(event.button==1){
flag=false;
}
}
);
</script>
</body>
</html>