昨天因为工作需要，研究了下select下拉列表，发现一段JS并进行了修改，因为源代码存在一个bug,所以我进行了稍微修改并注明，希望能对大家有所帮助！
固定宽度的select下拉列表option选项显示不全的解决办法:
在实际的开发中在页面中为了布局的需要，下拉菜单<select>的宽度要设成比较小的值，但这时由于包含的选择项<option>的内容比较长，那么超出select宽度的部分将会被截断，如果option显示的内容又比较重要，必须完整地展现出来，这就成为一个必须要解决的问题。
在IE7和Firefox中，由于支持了<option>的title属性，我们可以想办法给option标记设置title属性（内容可以与显示的值相同或者不同）。如果是已经做好的页面，不想再做太多改动，可以用下面的脚本，自动遍历页面上的所有<select>，给所有的option加上与text相同的title。
看下面的代码:
<script type="text/javascript">
function SetOptionTitle(){
var selects = document.getElementsByTagName("select");
if (selects.length > 0){
for (var i = 0; i < selects.length; i++){
var options = selects[i].options;
if (selects[i].options.length > 0){
for (var j = 0; j < options.length; j++){
if (options[j].title == "")
options[j].title = options[j].text;
}
}
}
}
}
</script>
但是，IE6并不支持<option>的title属性，这个方法在IE6下完全不起作用！但是由于IE6还是市场的主流,我们还是想办法解决这个问题.
目前想到的办法是：当鼠标悬停到<select>时，创建一个这个下拉列表的副本，同时把焦点移到这个副本上，把副本的样式设成绝对定位，而且盖在原来的下拉列表上，宽度根据option的显示内容自动拉伸，当这个副本失去焦点，或者用户对它进行了选择操作后，获取副本的selectedIndex，赋给原来的select对象。具体代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>http://blog.sina.com.cn/delectiveconan</title>
<script type="text/javascript">
function FixWidth(selectObj){
var newSelectObj = document.createElement_x_x("select");
newSelectObj = selectObj.cloneNode(true);
newSelectObj.setAttribute("ID", "aa");
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 = "";
}
var rollback = function(){ RollbackWidth(selectObj, newSelectObj); };
newSelectObj.onmouseout= rollback;//新增加的事件，解决一处BUG
newSelectObj.focus();
newSelectObj.onfocus = function(){ newSelectObj.onmouseout=null; };//新增加的事件，解决BUG
newSelectObj.onblur = rollback;
newSelectObj.onchange = rollback;
selectObj.style.visibility = "hidden";
document.body.appendChild(newSelectObj);
}
function RollbackWidth(selectObj, newSelectObj){
selectObj.selectedIndex = newSelectObj.selectedIndex;
selectObj.style.visibility = "visible";
document.body.removeChild(newSelectObj);
}
</script> <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"></option>
<option id="B" title="this is B">http://www.phpzixue.cn/</option>
<option id="C" title="this is C">phpzixue.cn</option>
</select>
</div>
</form>
</body>
</html>
有了这个demo，我们就可以把其中的js提取出来，应用到项目中需要的地方了。
目前这种方式是给select注册了onmouseover，对于鼠标操作是没什么问题，如果用户是按tab键移动焦点就无效了。有兴趣的同学可以考虑解决一下.
分享到：
相关推荐
NULL 博文链接：https://jyao.iteye.com/blog/579409
select下拉框列表实现图片内容显示，$("#***").select()格式
select 下拉列表 下拉列表显示图片
方法一 复制代码代码如下: document.getElementById(“selectid”).options.length = 0; 方法二 复制代码代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码代码如下: document....
实现select下拉选项可编辑
然后select内的列表为标题列表 然后你要选中标题显示内容 那么内容区域先定义出来 然后select的option的value给你新闻的标题 在内容区域里也把所有列表调出来(两边的sql语句一致) 比如 <select <option value='1'>...
简单的例子，点击按钮就删除掉option，也可以通过jquery加载的时候进行删除。
NULL 博文链接：https://fukaijian.iteye.com/blog/1871190
select多选下拉列表+模糊查询功能，亲测完整，有ASP和HTML样例，代码完整。 <!DOCTYPE html> <title>Insert title here</title> <script src="jquery.min.js"></script> ...
纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框样式，显示框的样式更改，下拉列表的样式更改！纯干货，肯定是你需要的 纯Css更改Select下拉框...
js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码 js模拟点击select下拉菜单列表代码
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
Select下拉列表框CssJavascriptCssJavascriptCssJavascript
select下拉框，按下空格键后让它的选项显示出来,按回车键选中值
默认的select下拉列表，很多客户都不太喜欢，当然，也包括我们自己已经看腻了 今天特意给大家推荐一款可以美化select下拉列表的插件——jquery.custom-select.js 只有十几KB大小，完全不影响网速加载 ...
js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效 js控制select选中显示不同表单内容select下拉菜单特效
select将选中的option设置为默认选项,可多个select可一个select.项目中遇到这个问题后自己写的(原先有默认值的话会将选中的设为默认选项)
二级下拉列表联动 select 网页 html5 学院、专业 选择的下拉列表 下载可用！！！
主要介绍了JS中Select下拉列表类(支持输入模糊查询)功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧