转载于
：http://clocker321.blog.163.com/blog/static/6350577200982794537757/
<!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)
{
if (navigator.userAgent.toLowerCase().indexOf("firefox") > 0) {
return;
}
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>`列表中的选项内容过长时，可能会出现一些问题，比如显示不全或者遮挡其他内容。针对这个问题，我们可以采取以下策略来优化和解决： 1. **设置固定宽度**：你可以为`<select>`元素设置一个固定的...
本文将详细探讨如何使用CSS设置下拉列表`<select>`及其选项`<option>`的样式。 首先，我们需要了解`<select>`的基本结构。一个下拉列表通常由`<select>`标签包裹一系列的`<option>`标签组成，例如： ```html ...
这个过程通常涉及到DOM操作，例如创建一个新的<select>元素，然后将超出的元素转化为<option>元素并添加到<select>中。JavaScript还会监听窗口的resize事件，以便在窗口大小变化时动态调整下拉列表的内容。 在实现...
总的来说，在面对HTML中select下拉框内容显示不全的问题时，可以在option元素中添加title属性来作为一种简单的解决方案。这种方法虽然不能直接解决显示问题，但可以提供一种有效的信息补充机制，保证用户在任何情况...
在网页设计中，下拉列表（Select）是用户界面中常用的一种交互元素，它允许用户在预设的一组选项中进行选择。"绿色下拉列表html"可能指的是使用HTML配合CSS来创建一个具有绿色主题风格的下拉选择框。下面我们将深入...
总之，这款JavaScript下拉列表组件提供了一种高效、灵活的解决方案，以满足各种网页应用中的选择需求。无论是对于新手还是经验丰富的开发者，都能快速集成并自定义这个组件，以适应他们的项目需求。通过深入理解这些...
在网页设计中，为了提升用户体验和界面美观度，开发者经常需要对HTML中的基本元素进行美化，其中`select`下拉列表选择框就是常见的一个部分。本文将深入探讨如何使用JavaScript (JS) 和 CSS 结合图片资源来美化`...
在使用Vue.js框架结合Element-UI组件库开发应用时，el-select选择器是一个常用的组件，用于实现下拉列表选择的功能。然而，在使用过程中可能会遇到一些问题，比如选择器无法显示选中的内容。这个问题可能会让开发...
2, 有时候页面上保留了很窄的地方需要写一个SELECT而SELECT下拉列表中的OPTION内容 又很长,往往显示不完整,用这个脚本new SelectView('','','','')第二个参数是上面文本框的宽度,主要是第三个参数,如果不设置就...
在HTML中，`<select>`标签用于创建一个下拉列表，而滚动条则是在选项过多时出现，允许用户浏览并选择不在当前视窗内的选项。本文将深入探讨select下拉滚动条的实现、样式定制以及与jQuery EasyUI框架的整合。 1. **...
在网页设计中，有时我们可能需要使用自定义的下拉列表来替代HTML原生的`<select>`元素，以实现更复杂或者更具设计感的交互效果。这就是"div 模拟下拉列表"的主要应用场景。这个技术主要是通过CSS和JavaScript（通常...
在iOS的Safari浏览器中，`<select>`下拉菜单中的长文字选项可能会导致显示问题，尤其是当文字过长而不换行时，这会影响到用户体验。为了解决这个问题，开发者通常需要寻找一种方法来确保长文本在下拉菜单中正确显示...
在Bootstrap中，输入框组（Input Groups）和下拉列表（Dropdowns）是两个常用的功能，它们可以组合使用，以创建更复杂的用户界面。下面我们将深入探讨如何在Bootstrap中调整下拉列表与输入框组结合的样式。 首先，...
5. **多选与分组**：如果需要支持多选或显示分组，只需在`<select>`元素中使用`<optgroup>`和`<option multiple>`，然后在初始化时设置`multiple`属性。 ```html <select multiple> <option value="1">Option 1...
通过设置`<select>`和`<option>`的CSS属性，可以定制下拉列表的视觉效果。例如，改变下拉列表的宽度和字体大小： ```css #mySelect { width: 200px; font-size: 18px; } ``` `README.txt`文件可能包含了关于这个...
这段代码会实时更新下拉列表，只显示包含当前搜索词的选项。 5. **初始化**： 如果你需要替换下拉内容，可以在页面加载完成后，动态添加 `option` 元素。例如： ```javascript $(document).ready(function() { ...
在xHTML中，下拉列表通常通过`<select>`标签创建，配合`<option>`标签来定义各个可选项目。在这个案例中，我们结合了JavaScript和CSS，以增强下拉菜单的用户体验和视觉效果，尤其是在Internet Explorer（IE）浏览器...
在网页设计和开发中，`select`元素是HTML中用于创建下拉列表的标签，它提供了用户可以从一组预定义选项中进行选择的功能。然而，原始的`select`元素通常只提供基本的交互功能，比如点击打开下拉列表，然后选择一个...
1. 原生HTML下拉列表：HTML中的`<select>`元素和`<option>`元素组合构成了基本的下拉列表。然而，原生的下拉列表样式和交互有限，无法满足现代Web设计的需求。 2. jQuery插件DropKick：压缩包中的JamieLottering-...