再问个,如何固定select框的宽度不变,并且选择的时候 让下拉列表每行的内容完全显示(在线.散分)

wind_rosebush 2009-03-05 01:59:02
比如:
<select name="test" size="1" style="width:50;">
<option>1 </option>
<option>2 </option>
<option>3 </option>
<option selected=true>55555555555555555555555555555555555555555 </option>
</select>
让select框不跟随最大的那一项长度的大小,让它是固定的,style="width:50;"这样满足了第一个条件,
另外当鼠标选择它的时候,下拉列表能看到这一行55555555555555555555555555555555555555555 的全部内容,
这样的话,该如何满足...

谢诸位热心人...
...全文
1362 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
xujiaxuliang 2009-03-11
  • 打赏
  • 举报
 回复
学习~
wind_rosebush 2009-03-07
  • 打赏
  • 举报
 回复
好，谢诸位了。。。
忙完散分
topscience 2009-03-06
  • 打赏
  • 举报
 回复
你的这段code，在FF上会工作的好好的，在IE上不行了。这是IE的一个限制。
<select name="test" size="1" style="width:50;">
<option>1 </option>
<option>2 </option>
<option>3 </option>
<option selected=true>55555555555555555555555555555555555555555 </option>
</select>

在IE上，当下拉框拉下时，555555。。。。。那个option就不会完全显示，这没有什么解决办法。

这个网页上有我见过的最好的解决办法（除了用JavaScript实现的模拟ComboBox,自己实现一个也挺麻烦的，要考虑鼠标，键盘，等等很多组合，才会实现一个和Select的行为一样的东西).

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php
ljooo 2009-03-06
  • 打赏
  • 举报
 回复
帮顶
luojihaidao 2009-03-06
  • 打赏
  • 举报
 回复
CSS　和JS


.value_div_bg{

		width:200px;

		height: 24px;

		border: 1px solid #888888;

		float: left;

		padding-top: 5px;

		padding-left: 3px;

		background: url( ../images/select/select_bg.bmp ) 98% center no-repeat;

	}

	.data_div{

		border: 1px solid #888888; width: 100%;background-color: white;display:none;

		position:absolute;

	}

	.itemDiv{

		display: block;

		padding-left: 3px;

		padding-top: 3px;

		width:100%;

		height: 20px;

		border-top:1px dotted white;

		border-bottom:1px dotted white;

		cursor: pointer;

	}

	.pickDiv{

		display: block;

		width:100%;

		background-color: #DDDBD6;

		border-top:1px dotted black;

		border-bottom:1px dotted #888888;

		cursor: pointer;

		padding-left: 3px;

		padding-top: 3px;

		height: 20px;

	}

	a:link {

		color: #000;

		text-decoration: none;

	}

	a:visited {

		color: #000;

		text-decoration: none;

	}

	a:hover {

		color: #000;

		text-decoration: none;

	}

	a:active {

		color: #000;

		text-decoration: none

	}


//浏览器类型以及版本
var brow = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie (\d+)/)) ? brow.ie = s[1] :
(s = ua.match(/firefox\/(\d+)/)) ? brow.firefox = s[1] :
(s = ua.match(/chrome\/(\d+)/)) ? brow.chrome = s[1] :
(s = ua.match(/opera.(\d+)/)) ? brow.opera = s[1] :
(s = ua.match(/version\/(\d+).*safari/)) ? brow.safari = s[1] : 0;

function addEventHandler(element,eventN,eventM){
if(!element){
return;
}
if(element.addEventListener){
element.addEventListener(eventN,eventM,false);
}else if(element.attachEvent){
element.attachEvent('on'+eventN,eventM)
}else{
element['on'+eventN] = eventM;
}
}

function removeEventHandler(element,eventN,eventM){
if(!element){
return;
}
if(element.removeEventListener){
element.removeEventListener(eventN,eventM,false);
}else if(element.detachEvent){
element.detachEvent('on' + eventN,eventM);
}else{
element['on' + eventN] = null;
}
}


function getNode(id){
return typeof(id) == 'string' ? document.getElementById(id) : id;
}

function createSelect(id){
var obj = getNode(id);
var dataAll = getNextChild(obj);
if(dataAll){
if(dataAll.tagName == "DIV"){
if(dataAll.innerHTML != ''){
obj.className = 'value_div_bg';
dataAll.className = 'data_div';
dataAll.style.top = obj.offsetTop + obj.offsetHeight + 'px';
dataAll.style.left = obj.offsetLeft + 'px';
dataAll.style.width = (brow.ie ? obj.offsetWidth : obj.clientWidth) + 'px';
addEventHandler(document,'click',
function(e){
var event = e.target || window.event.srcElement;
if(obj == event){
dataAll.style.display = 'block';
return;
}
if(dataAll != event)
dataAll.style.display = 'none';
}
)
changeCurData(obj,getFirstChild(dataAll.childNodes[0]));
var data = getChildren(dataAll);
for(var i=0; i<data.length;i++){
data[i].className = "itemDiv";
addEventHandler(data[i],'mouseover',
function(e){var event = e.target || window.event.srcElement;event.className = 'pickDiv';}
);
addEventHandler(data[i],'mouseout',
function(e){ var event = e.target || window.event.srcElement;event.className = 'itemDiv';}
);
addEventHandler(data[i],'click',
function(e){var event = e.target || window.event.srcElement;dataAll.style.display = 'none';changeCurData(obj,event);}
);
}
}else{
document.body.removeChild(dataAll);
}
}
}

}

function changeCurData(objChange, objSource){
objChange.setAttribute('value',objSource.getAttribute('value'));
objChange.innerHTML = objSource.innerHTML;
}

function getNextChild(obj){
var child = obj.nextSibling;
var childTagName = obj.tagName;
while (child) {
if (child.tagName == childTagName.toUpperCase()) {
return child;
}
child = child.nextSibling;
}
return null;
}

function getFirstChild(child){
while (child) {
if (child.nodeType == 1) {
return child;
}
child = child.nextSibling;
}
return null;
}

function getChildren(parentObj){
var child = parentObj.firstChild;
var items = [];
while (child) {
if (child.nodeType == 1) {
items.push(child);
}
child = child.nextSibling;
}
return items;
}
luojihaidao 2009-03-06
  • 打赏
  • 举报
 回复
测试页面


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <link href="./styles/selectNode.css" rel="stylesheet" type="text/css"/>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <script type="text/javascript" src="./scripts/selectNode.js"></script>

  <script type="text/javascript">

	 function init(){

		createSelect('test');

		createSelect('test1');

	 }

	 

	 function test(id){

		var obj = document.getElementById(id);

		alert(obj.getAttribute('value') + "======" +obj.innerHTML)

	 }

  </script>

 </HEAD>



 <BODY onload='init()'>

  <div id=test>

  </div>

  <div>

		<div value='1'>aaa</div>

		<div value='2'>bbb</div>

		<div value='3'>ccc</div>

		<div value='4'>ddd</div>

	</div>



	<div id=test1>

  </div>

  <div>

		<div value='1'>aaa</div>

		<div value='2'>dfdf</div>

		<div value='3'>ccc</div>

		<div value='4'>ddd</div>

	</div>

<br>

<br>

	<input type='button' onclick='test("test")' value='testData'/>

	<input type='button' onclick='test("test1")' value='test1Data'/>

 </BODY>

</HTML>
luojihaidao 2009-03-06
  • 打赏
  • 举报
 回复
楼上的在IE6　和FF　下好像不好用哦。

我建议LZ 写自己的select　我给个自己写的（用DIV实现，IE　FF下测试）
esena 2009-03-06
  • 打赏
  • 举报
 回复
那个多余的代码 title='sdsds' 是忘记删掉的没用代码,记得多给分阿,哈哈
esena 2009-03-06
  • 打赏
  • 举报
 回复 
<script>

	function showTitle(){

		event.srcElement.title=event.srcElement.options[event.srcElement.selectedIndex].text;

	}

</script>

<select name="test" size="1" style="width:50;" onmouseover="showTitle()" onchange="showTitle()"> 

    <option>1 </option> 

    <option>2 </option> 

    <option>3 </option> 

    <option selected=true title='sdsds'>55555555555555555555555555555555555555555 </option> 

    </select>

不知道这样算不算完美解决,呵呵
MildSong 2009-03-06
  • 打赏
  • 举报
 回复
楼主使用javascript自己封装一个select对象吧
你提出的问题，现有的解决办法都无法达到你的要求
dyydingding 2009-03-06
  • 打赏
  • 举报
 回复
楼主 我也没明白你在说什么呢！愁
帮忙顶一下吧！
wind_rosebush 2009-03-05
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 liuyilidan 的回复:]
用一个DIV模拟显示数据
当点下拉列表的时候显示div
下拉列表值不进行下拉：即下拉列表的onclick事件只执行显示div
[/Quote]
楼上什么意思,不懂,能再解释一下吗
最好弄点代码,好看一下...
liuyilidan 2009-03-05
  • 打赏
  • 举报
 回复
用一个DIV模拟显示数据
当点下拉列表的时候显示div
下拉列表值不进行下拉：即下拉列表的onclick事件只执行显示div
xiongzhijian 2009-03-05
  • 打赏
  • 举报
 回复
Floating div
display perproty
wind_rosebush 2009-03-05
  • 打赏
  • 举报
 回复
补充一点:
最好是这样解决,
最好是鼠标放在下拉框的某个选项上,通过onmouseover显示该选项的全部内容
前端基础知识持续整理中。。
一、Css盒模型 标准盒模型和IE盒模型 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。  CSS盒模型和IE盒模型的区别： 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 IE盒子模型中，width 和 height 指的是内
office VBA 学习
http://www.officefans.net/cdb/viewthread.php tid=25823&fpage=1&highlight=%B7%B5%BB%D8%2B%D0%D0%BA%C5 以下是近段时间从不同地方收集到的一些学习资料,希望对新手有借鉴作用,同时感谢各位对我的支持和帮助,先发60小点,代码可能不完全正确,请指正. 全部显示 1,Application.Comman
网页设计问题大搜集
Q： 怎么才能让层飘在Flash上面？ A： 在网页里把SWF文件设置为背景透明即可，具体做法：DW中，在SWF文件的属性面板中，点parameters，添加参数wmode，值选择transparent；或者直接修改网页的代码，在标志SWF文件属性的代码中添加：＜param name="wmode" value="transparent"＞注意，这种效果只有IE支持。Q： 如何让一个图片或
《Head First HTML与CSS》的HTML标签、属性
一个标准的html5页面： <!doctype html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title></title> </head> <body>...
C#基础教程
第一章       C#语言基础 本章介绍C#语言的基础知识，希望具有C语言的读者能够基本掌握C#语言，并以此为基础，能够进一步学习用C#语言编写window应用程序和Web应用程序。当然仅靠一章的内容就完全掌握C#语言是不可能的，如需进一步学习C#语言，还需要认真阅读有关C#语言的专著。 1.1      C#语言特点 Microsoft.NET(以下简称.NET)框架是微软提出的新一代W...
JavaScript

87,921

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章