补充一点:
最好是这样解决,
最好是鼠标放在下拉框的某个选项上,通过onmouseover显示该选项的全部内容
最好是这样解决,
最好是鼠标放在下拉框的某个选项上,通过onmouseover显示该选项的全部内容
解决方案 »
- checkbox自动选择问题
- javascript在动态添加下拉框项时IE和FireFox不一样。怎么办?
- 小小...
- js替换某一段的字符
- 怎么用<a href="页面名?name=value" target="" />来传值?
- 有没有对DHTML元素,如:input 增加自定义方法的方法或例子。
- 怎样把有链接的文字,通过点击,自动加入到文本框中去?
- 请问如何在网页中得到访问者的IP地址的代码??
- 使用select对象,单击它的内容可结果为什么每次都只显示-1呀?
- 后台接收前台Ajax所传的值
- EXRJS结合ASP.NET进行开发,文本框带html字符报错
- 请问call(),apply()的具体用法
display perproty
当点下拉列表的时候显示div
下拉列表值不进行下拉:即下拉列表的onclick事件只执行显示div
<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
你提出的问题,现有的解决办法都无法达到你的要求
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>
不知道这样算不算完美解决,呵呵
<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>
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;
}