下拉列表中tip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select id="a">
<option slected="slected">下拉框里的字太多了，下拉框会变长，然后把版面挤乱了，多余的如何显示成省略号？</option>
<option>或者限制住下拉框的跨度也行？</option>
<option>style="width:100px;"</option>
<option>这种已经试过了，没用！/option>
</select>
<script>
var optionW=5; //option字符长度
window.onload=function(){
var a=document.getElementById("a").getElementsByTagName("option");
for (i=0;i<a.length;i++ ){
if (a.text.length > optionW){
a.innerHTML=a.text.substring(0,optionW-1)+"...";
}
}
}
</script>
</body>
</html>
<body>
<select id="a">
<option slected="slected">下拉框里的字太多了，下拉框会变长，然后把版面挤乱了，多余的如何显示成省略号？</option>
<option>或者限制住下拉框的跨度也行？</option>
<option>style="width:100px;"</option>
<option>这种已经试过了，没用！/option>
</select>
<script type="text/javascript">
function cutOption(selectObj , length) {
this.selectObj = selectObj;
this.length = length;
}
cutOption.prototype.init = function() {
this.options = this.selectObj.getElementsByTagName('option');
for(i=0 , j=this.options.length ; i<j ; i++ )
{
text = this.options.firstChild.nodeValue;
if(text.length<=this.length)
{
return;
}
else {
this.options.innerHTML = text.substring(0,this.length) + '...';
}
}
}
obj = document.getElementById('a');
//想要几个字就改第二个参数;
var optionClass = new cutOption(obj , 2);
optionClass.init();
</script>
</body>
页:
[1]