html select标签问题! jsp页面上有一个select标签,标签的宽度是固定不变的,select中的内容超过了select的宽度。问题:在标签宽度不变的情况下,展开select,其中的内容按实际长度显示。越简单越好! 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 如果非要实现的话 应该用css+div来实现不过不像你说的那么简单 让select显示的内容用程序先处理好换行。不知道行不? demo,通过焦点事件覆盖原来的select。复制下面代码到文本文档里,改后缀为html,运行就可以看到效果了。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript">function FixWidth(selectObj){ var newSelectObj = document.createElement("select"); newSelectObj = selectObj.cloneNode(true); newSelectObj.selectedIndex = selectObj.selectedIndex; newSelectObj.onmouseover = null; var e = selectObj; var absTop = e.offsetTop; var absLeft = e.offsetLeft; while(e = e.offsetParent) { absTop += e.offsetTop; absLeft += e.offsetLeft; } with (newSelectObj.style) { position = "absolute"; top = absTop + "px"; left = absLeft + "px"; width = "auto"; } var rollback = function(){ RollbackWidth(selectObj, newSelectObj); }; if(window.addEventListener) { newSelectObj.addEventListener("blur", rollback, false); newSelectObj.addEventListener("change", rollback, false); } else { newSelectObj.attachEvent("onblur", rollback); newSelectObj.attachEvent("onchange", rollback); } selectObj.style.visibility = "hidden"; document.body.appendChild(newSelectObj); newSelectObj.focus();}function RollbackWidth(selectObj, newSelectObj){ selectObj.selectedIndex = newSelectObj.selectedIndex; selectObj.style.visibility = "visible"; document.body.removeChild(newSelectObj);}</script></head><body><form method="post"> <div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;"> <select name="Select1" style="width:80px;" onmouseover="FixWidth(this)"> <option id="A" title="this is A">AAAAAAAAAAAAAAA</option> <option id="B" title="this is B">BBBBBBBBBBBBBBB</option> <option id="C" title="this is C">CCCCCCCCCCCCCCC</option> </select> </div></form></body></html> css+div整吧.! 参考下4L的 通过焦点事件覆盖原来的select。 正则表达式替换html标签? 网站发布 struts, config配置文件里没有为action设置attribute属性,为啥在input页面可以用request.getAttribute? 高分求教:struts+iterate显示数据库中的表格,如果遇到<select>该怎么办? 送分:radiogroup 取值问题 这个链接怎么不点就直接执行了呢? innerHTML动态增加的行没有样式 TOMCAT发布问题 servlet 中如何实行分页 还是那个日期相加减的问题,如何转换成多少分钟??????? wicket开发获取表格一行信息的问题 如何将一个输出流里的内容在jsp页面显示
不过不像你说的那么简单
复制下面代码到文本文档里,改后缀为html,运行就可以看到效果了。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
function FixWidth(selectObj)
{
var newSelectObj = document.createElement("select");
newSelectObj = selectObj.cloneNode(true);
newSelectObj.selectedIndex = selectObj.selectedIndex;
newSelectObj.onmouseover = null;
var e = selectObj;
var absTop = e.offsetTop;
var absLeft = e.offsetLeft;
while(e = e.offsetParent)
{
absTop += e.offsetTop;
absLeft += e.offsetLeft;
}
with (newSelectObj.style)
{
position = "absolute";
top = absTop + "px";
left = absLeft + "px";
width = "auto";
}
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
if(window.addEventListener)
{
newSelectObj.addEventListener("blur", rollback, false);
newSelectObj.addEventListener("change", rollback, false);
}
else
{
newSelectObj.attachEvent("onblur", rollback);
newSelectObj.attachEvent("onchange", rollback);
}
selectObj.style.visibility = "hidden";
document.body.appendChild(newSelectObj);
newSelectObj.focus();
}function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
document.body.removeChild(newSelectObj);
}
</script>
</head><body><form method="post">
<div style="width:100px; height:100px; margin:100px; padding:10px; background:gray;">
<select name="Select1" style="width:80px;" onmouseover="FixWidth(this)">
<option id="A" title="this is A">AAAAAAAAAAAAAAA</option>
<option id="B" title="this is B">BBBBBBBBBBBBBBB</option>
<option id="C" title="this is C">CCCCCCCCCCCCCCC</option>
</select>
</div>
</form></body></html>