昨天因为工作需要，研究了下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键移动焦点就无效了。有兴趣的同学可以考虑解决一下.
分享到：
相关推荐
总的来说，处理固定宽度下拉列表`<select>`中`<option>`内容显示不全的问题需要结合HTML、CSS和JavaScript的知识。开发者需要了解浏览器对`<select>`元素的限制，然后根据需求选择最合适的解决方案，无论是使用现有...
然而，当`<select>`列表中的选项内容过长时，可能会出现一些问题，比如显示不全或者遮挡其他内容。针对这个问题，我们可以采取以下策略来优化和解决： 1. **设置固定宽度**：你可以为`<select>`元素设置一个固定的...
综上所述，通过结合JavaScript和CSS，我们可以对`select`下拉列表选择框进行深度美化，包括调整基本样式、添加自定义图片，甚至实现复杂的交互效果。在`select美化选择框.htm`这个示例文件中，我们可以看到一个完整...
在网页设计中，"select下拉滚动条"是常见的用户交互元素，用于提供多个选项供用户选择。在HTML中，`<select>`标签用于创建一个下拉列表，而滚动条则是在选项过多时出现，允许用户浏览并选择不在当前视窗内的选项。...
本文将详细探讨如何使用CSS设置下拉列表`<select>`及其选项`<option>`的样式。 首先，我们需要了解`<select>`的基本结构。一个下拉列表通常由`<select>`标签包裹一系列的`<option>`标签组成，例如： ```html ...
2. **宽高自适应**：根据父元素或者设置的宽度自动调整下拉列表的宽度，同时，高度可能会随着选项数量的增加而动态调整，以防止滚动条的出现。 3. **跨浏览器兼容**：由于不同的浏览器对某些CSS样式和JavaScript ...
在网页设计中，下拉列表（Select）是用户界面中常用的一种交互元素，它允许用户在预设的一组选项中进行选择。"绿色下拉列表html"可能指的是使用HTML配合CSS来创建一个具有绿色主题风格的下拉选择框。下面我们将深入...
在网页设计中，有时我们可能需要使用自定义的下拉列表来替代HTML原生的`<select>`元素，以实现更复杂或者更具设计感的交互效果。这就是"div 模拟下拉列表"的主要应用场景。这个技术主要是通过CSS和JavaScript（通常...
这些插件提供了丰富的自定义选项，能够轻松地改变下拉列表的外观和行为。以`Select2`为例，它允许我们设置选择框的宽度、字体、颜色、边框等样式，并且支持搜索、多选等功能。 1. **安装与引入插件**：首先，你需要...
总的来说，在面对HTML中select下拉框内容显示不全的问题时，可以在option元素中添加title属性来作为一种简单的解决方案。这种方法虽然不能直接解决显示问题，但可以提供一种有效的信息补充机制，保证用户在任何情况...
这段代码会实时更新下拉列表，只显示包含当前搜索词的选项。 5. **初始化**： 如果你需要替换下拉内容，可以在页面加载完成后，动态添加 `option` 元素。例如： ```javascript $(document).ready(function() { ...
例如，可以通过计算屏幕宽度和选项宽度来决定每行显示多少个选项，然后用CSS的`display: flex`和`flex-wrap: wrap`属性来实现换行。 5. **响应式设计**：确保搜索栏和下拉选择框在不同设备和屏幕尺寸上都能良好工作...
这时，jQuery 的插件 `bootstrap-select` 应运而生，它基于 Bootstrap 框架，提供了美观且功能强大的可搜索多选下拉列表。 `bootstrap-select` 是一个流行的 jQuery 插件，它扩展了 Bootstrap 的 `<select>` 元素，...
通过设置`<select>`和`<option>`的CSS属性，可以定制下拉列表的视觉效果。例如，改变下拉列表的宽度和字体大小： ```css #mySelect { width: 200px; font-size: 18px; } ``` `README.txt`文件可能包含了关于这个...
例如，我们可以修改下拉框的宽度、高度，以及选项的显示方式： ```css select[multiple] { width: 200px; height: 200px; overflow-y: auto; /* 防止滚动条超出容器 */ } option:checked { background-color: ...
1. 自定义选项：通过传递配置对象给`.dropkick()`方法，可以设置下拉列表的颜色、宽度等属性。例如，设置选中项的背景色： ```javascript $('select').dropkick({ selectedOptionBackground: '#ff0000' }); ``` ...
在xHTML中，下拉列表通常通过`<select>`标签创建，配合`<option>`标签来定义各个可选项目。在这个案例中，我们结合了JavaScript和CSS，以增强下拉菜单的用户体验和视觉效果，尤其是在Internet Explorer（IE）浏览器...
在网页设计和开发中，`select`元素是HTML中用于创建下拉列表的标签，它提供了用户可以从一组预定义选项中进行选择的功能。然而，原始的`select`元素通常只提供基本的交互功能，比如点击打开下拉列表，然后选择一个...
然后，使用 jQuery UI 的 `selectmenu` 方法将普通下拉列表转换为美化后的版本： ```javascript $(function() { $("#selectMenu").selectmenu(); }); ``` 这行代码会在文档加载完成后，将 ID 为 "selectMenu" 的...
在iOS的Safari浏览器中，`<select>`下拉菜单中的长文字选项可能会导致显示问题，尤其是当文字过长而不换行时，这会影响到用户体验。为了解决这个问题，开发者通常需要寻找一种方法来确保长文本在下拉菜单中正确显示...