固定宽度下拉列表中option内容显示不全问题解决方法
2012-10-06 09:29
1216 查看
动态显示，在鼠标点中后显示完整的列表，离开后显示缩略的列表。
公司项目中，很多页面都用到了select组件模拟树状选择框，由于树的层次可能非常多，因此<option>的选择项内容非常长，而超出固定长度的部分被截断，无法完全看清，导致用户体验比较差，因此，要求统一修改。
但是，树层次并非固定，而是允许用户自定义，所以组件宽度不能是定长。如果定义的长度不是足够长，而用户定义的树层次很多，仍然无法完全看清；如果定义长度足够长，但用户定义树层次比较少，反而页面不美观。
想起网络上牛人比比皆是，他们一定碰到过类似的情况，于是上网搜了一下，果然被我找到了，但这个例子有个小问题，就是鼠标离开那个select框后，不能自动收回宽度；必须在页面上其他地方，点击鼠标或者选择下拉框后，才能做自动收回，还是有点美中不足，呵呵。
一开始觉得很简单，只要监听newSelectObj的onmouseover事件，当鼠标离开它的时候，删除newSelectObj就行了，但事实上不是这样的，因为当移动鼠标去选择newSelectObj的option时候，它就认为已经离开了newSelectObj，会马上删除 newSelectObj，因此，这样的修改将导致无法选择option。
办法总是能想出来的，经过一上午的多次试验、修改，我终于解决了这个问题，解决方法很简单，增加newSelectObj前，加上一个ｄｉｖ，这个ｄｉｖ刚刚比newSelectObj稍微大一点点，且是透明的（透明让用户无法察觉多加了一个div），ｄｉｖ增加一个鼠标监听事件，当鼠标从ｄｉｖ上移走后，删除newSelectObj、div即可（因为这个ｄｉｖ不比newSelectObj大多少，当鼠标从newSelectObj移走后，基本上会同时离开这个ｄｉｖ）。
而其他人的修改就非常简单了，首先我把这些函数放到一个ｊｓ中，其他人引用这个ｊｓ即可，然后在select组件上增加一个onmouseover事件，调用方法"FixWidth(this)"即可，大大减轻了修改的工作量。
这样一来，效果就好多了。事实上，我并没有自动调整select的宽度，而是创建了一个块头比较大的、新的select，我们的眼睛只是被善意地欺骗了，适当的善意欺骗确实是好的，哈哈
效果如下：
1、页面初始化效果
2、鼠标移到select上的效果
3、点击select效果
详细代码如下：
<!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.id="newSelectObj";
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);
var newDiv = document.createElement("div");
with (newDiv.style)
{
position = "absolute";
top = (absTop-10) + "px";
left = (absLeft-10) + "px";
width = newSelectObj.offsetWidth+20;
height= newSelectObj.offsetHeight+20;;
background = "transparent";
//background = "green";
}
document.body.appendChild(newDiv);
newSelectObj.focus();
var enterSel="false";
var enter = function(){enterSel=enterSelect();};
newSelectObj.onmouseover = enter;
var leavDiv="false";
var leave = function(){leavDiv=leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel);};
newDiv.onmouseleave = leave;
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
if(document.getElementById("newSelectObj") != null){
document.body.removeChild(newSelectObj);
}
}
function removeNewDiv(newDiv)
{
document.body.removeChild(newDiv);
}
function enterSelect(){
return "true";
}
function leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel){
if(enterSel == "true" ){
RollbackWidth(selectObj, newSelectObj);
removeNewDiv(newDiv);
}
}
</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>
公司项目中，很多页面都用到了select组件模拟树状选择框，由于树的层次可能非常多，因此<option>的选择项内容非常长，而超出固定长度的部分被截断，无法完全看清，导致用户体验比较差，因此，要求统一修改。
但是，树层次并非固定，而是允许用户自定义，所以组件宽度不能是定长。如果定义的长度不是足够长，而用户定义的树层次很多，仍然无法完全看清；如果定义长度足够长，但用户定义树层次比较少，反而页面不美观。
想起网络上牛人比比皆是，他们一定碰到过类似的情况，于是上网搜了一下，果然被我找到了，但这个例子有个小问题，就是鼠标离开那个select框后，不能自动收回宽度；必须在页面上其他地方，点击鼠标或者选择下拉框后，才能做自动收回，还是有点美中不足，呵呵。
一开始觉得很简单，只要监听newSelectObj的onmouseover事件，当鼠标离开它的时候，删除newSelectObj就行了，但事实上不是这样的，因为当移动鼠标去选择newSelectObj的option时候，它就认为已经离开了newSelectObj，会马上删除 newSelectObj，因此，这样的修改将导致无法选择option。
办法总是能想出来的，经过一上午的多次试验、修改，我终于解决了这个问题，解决方法很简单，增加newSelectObj前，加上一个ｄｉｖ，这个ｄｉｖ刚刚比newSelectObj稍微大一点点，且是透明的（透明让用户无法察觉多加了一个div），ｄｉｖ增加一个鼠标监听事件，当鼠标从ｄｉｖ上移走后，删除newSelectObj、div即可（因为这个ｄｉｖ不比newSelectObj大多少，当鼠标从newSelectObj移走后，基本上会同时离开这个ｄｉｖ）。
而其他人的修改就非常简单了，首先我把这些函数放到一个ｊｓ中，其他人引用这个ｊｓ即可，然后在select组件上增加一个onmouseover事件，调用方法"FixWidth(this)"即可，大大减轻了修改的工作量。
这样一来，效果就好多了。事实上，我并没有自动调整select的宽度，而是创建了一个块头比较大的、新的select，我们的眼睛只是被善意地欺骗了，适当的善意欺骗确实是好的，哈哈
效果如下：
1、页面初始化效果
2、鼠标移到select上的效果
3、点击select效果
详细代码如下：
<!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.id="newSelectObj";
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);
var newDiv = document.createElement("div");
with (newDiv.style)
{
position = "absolute";
top = (absTop-10) + "px";
left = (absLeft-10) + "px";
width = newSelectObj.offsetWidth+20;
height= newSelectObj.offsetHeight+20;;
background = "transparent";
//background = "green";
}
document.body.appendChild(newDiv);
newSelectObj.focus();
var enterSel="false";
var enter = function(){enterSel=enterSelect();};
newSelectObj.onmouseover = enter;
var leavDiv="false";
var leave = function(){leavDiv=leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel);};
newDiv.onmouseleave = leave;
}
function RollbackWidth(selectObj, newSelectObj)
{
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
if(document.getElementById("newSelectObj") != null){
document.body.removeChild(newSelectObj);
}
}
function removeNewDiv(newDiv)
{
document.body.removeChild(newDiv);
}
function enterSelect(){
return "true";
}
function leaveNewDiv(selectObj, newSelectObj,newDiv,enterSel){
if(enterSel == "true" ){
RollbackWidth(selectObj, newSelectObj);
removeNewDiv(newDiv);
}
}
</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 固定宽度下拉列表中option内容显示不全问题解决方法
- 固定宽度下拉列表中option内容显示不全问题解决方法
- 固定宽度下拉列表中option内容显示不全问题解决方法
- 固定宽度下拉列表中option内容显示不全问题解决方法
- 固定宽度下拉列表中option内容显示不全问题解决方法
- 解决IE8固定宽度下拉列表中option内容显示不全问题
- html固定宽度下拉框内容显示不全问题解决方法
- html固定宽度下拉框内容显示不全问题解决方法
- html固定宽度下拉框内容显示不全问题解决方法
- JavaScript解决select下拉框中的内容太长显示不全的问题
- HTML中select下拉框内容显示不全部分被覆盖的解决方法
- jQuery 解决 IE 6/7/8 BUG：下拉框select设宽度时option超出显示不全
- ie11兼容性问题，jsp在IE11显示不全问题，ie11覆盖内容问题解决方法
- 解决ie 7,8 下seleclt固定width之后 当option宽度大于width option无法显示完全的问题
- 没有滚动条，页面内容显示不全问题的解决方法
- JavaScript解决select下拉框中的内容太长显示不全的问题
- Android中重写toString（）方法解决列表显示问题（为什么要重写toString？）
- JqueryEasyUI的DataGrid接收html内容后不显示问题的原因,解决方法
- WordPress中修改固定链接导致无法显示文章内容的问题的解决办法