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>`中`<option>`内容显示不全的问题需要结合HTML、CSS和JavaScript的知识。开发者需要了解浏览器对`<select>`元素的限制，然后根据需求选择最合适的解决方案，无论是使用现有...
然而，当`<select>`列表中的选项内容过长时，可能会出现一些问题，比如显示不全或者遮挡其他内容。针对这个问题，我们可以采取以下策略来优化和解决： 1. **设置固定宽度**：你可以为`<select>`元素设置一个固定的...
在网页设计和开发中，创建一个既可选择又可输入的下拉列表框可以提供用户更灵活的交互体验。这样的设计允许用户在预设的选项中选择，同时也可以自定义输入他们自己的值。这种功能通常用于那些可能有固定选项但又允许...
在网页开发中，为了提高用户体验，经常需要使用到下拉列表。然而，传统的HTML `<select>` 标签往往功能有限，无法满足复杂的交互需求，如多选和搜索功能。这时，jQuery 的插件 `bootstrap-select` 应运而生，它基于 ...
ComboBox控件是Windows Forms和WPF等.NET框架中常见的用户界面元素，用于提供下拉列表选项，用户可以从中选择一个值或输入自定义文本。它结合了文本框（TextBox）和列表框（ListBox）的功能，使得在有限的空间内提供...
65. `<option>`：定义下拉列表中的选项。 66. `<p>`：定义段落。 67. `<param>`：为`<applet>`、`<object>`或`<embed>`设置参数。 68. `<plaintext>`：以固定宽度字体显示文本，不解析HTML标签，HTML5中已废弃。 69....
- `android:dropDownWidth`: 设置下拉列表的宽度，可以是固定的像素值或"wrap_content"。 - `spinnerMode`: 可以设置为"dialog"或"dropdown"，分别让下拉列表以对话框或下拉菜单的形式出现。 在实际项目中，我们...
实例197 页面布局(2列固定宽度+头部+导航+尾部) 242 实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例...
实例197 页面布局(2列固定宽度+头部+导航+尾部) 242 实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例...
61. `<optgroup>`：在`<select>`下拉列表中创建逻辑分组。 62. `<option>`：`<select>`元素中的选项。 63. `<p>`：定义一个段落。 64. `<param>`：设置`<applet>`、`<embed>`或`<object>`的初始参数值。 这些...
在深入探讨CSS基础重点内容...以上就是CSS基础重点内容的简要总结，涵盖了路径、标签类型、样式编写、输入类型、定位、透明度以及下拉列表等多个方面。理解并熟练掌握这些知识点，对于进行网页布局和样式设计至关重要。
57. `<noframes>`：在不支持框架的浏览器中显示内容。 58. `<noscript>`：在不支持脚本的环境中显示的内容。 59. `<object>`：插入各种类型的对象，如图片、视频、插件等。 60. `<ol>`：创建有序列表。 61. `...
- **技术实现**：在获取打印机名称后，使用DOM操作动态创建`<option>`元素，并将其添加到指定的`<select>`元素中，形成下拉列表。 - **代码示例**： ```javascript for (var i = 0; i ; i++) { var msg = LODOP...
78. **select**: 创建下拉列表。 79. **small**: 使文本比当前字体小，常用于注释或次要信息。 80. **span**: 通用内联容器，用于组合文本或应用样式。 81. **strike**: 用删除线显示文本，现在推荐使用`<s>`。 82. ...
- **DropDownWidth**：设置组合框下拉列表的宽度。 #### 1.09 列表框控件(ListBox)的常用属性 - **Text**：当前选定项的文本。 - **List**：列表框的所有项列表。 - **ListIndex**：当前选定项的索引位置。 - **...
- **`<select>`**：下拉列表框。 - **`<option>`**：列表项。 - **多媒体** - **`<embed>`**：嵌入多媒体文件（如 Flash、音频或视频）。 - **`<bgsound>`**：为页面添加背景音乐。 - **`...
`<select>`创建下拉列表或列表框。`<small>`将文本缩小。`<span>`是内联容器，用于组合和样式化文本。`<strike>`（过时）用于删除线文本。`<strong>`使文本加粗，表示重要性。`<style>`定义页面样式。`<sub>`显示...
- `<option>`定义下拉列表中的选项。 - `<p>`定义段落。 - `<param>`设置嵌入内容（如`<object>`或`<embed>`)的参数。 - `<pre>`以固定宽度字体显示预格式化的文本。 - `<q>`用于短引用，自动添加引号。 - `<s>`显示...
例如，可以使用`<option>`标签定义下拉列表中的每个选项。 #### 7. 创建黑体字的文本标签 - **知识点**: `<b>`标签用于创建黑体字。 - **解析**: `<b>`标签用于定义粗体文本，但不具有任何额外的意义或权重。对于...
- **示例**：如要创建一个名为“like”的下拉列表，并将“旅游”作为默认选项，则应使用`<option selected>旅游</option>`。 ### 知识点7：框架集的定义 **描述：** 框架集是一种早期的网页布局技术，可以将一个...