title显示不了,不起作用
问题,为了布局方便,我把select的宽度控制在60px了,但是这样就显示不完全了
我就想用title在显示一下。结果发现不起作用,你们是怎么处理这个问题的??
<select name= "select " style= "width:60px; ">
<option value= "1 " title= "中华人民共和国 "> 中华人民共和国 </option>
<option value= "2 " title= "发财改革委员会 "> 发财改革委员会 </option>
<option value= "3 " title= "cccccc "> cccccc </option>
</select>
谢谢
[解决办法]
只能模拟。
[解决办法]
樓上的說話了,只有認同的份.
[解决办法]
模拟一个吧
不难的
封装好一点
然后把代码发上来
然后把帖子结了
然后把分给我
然后...
[解决办法]
是啊.显示不了....是不是 <select> 不支持这个啊....
[解决办法]
不用非要模拟select吧..你可以给它添加一个onmousedown和一个document.onmousemove
[解决办法]
..看来不行,这个东西挺有性格......飘走...
[解决办法]
晕
[解决办法]
muxrwc(王辰) ( ) 信誉:100 Blog 2007-01-15 18:13:51 得分: 0
..看来不行,这个东西挺有性格......飘走...
============
你也很有个性,同飘
[解决办法]
同情一下。。。。
看来都“飘”走了
[解决办法]
给你找了个PL的...
不过这个貌似FF下有些问题...
两个大星星啦...自己写个嘛...
<script>
/************************************************
**** *****Select Box Design Script By Backley ***********
************************************************/
var nowOpenedSelectBox = " ";
var mousePosition = " ";
function selectThisValue(thisId,thisIndex,thisValue,thisString) {
var objId = thisId;
var nowIndex = thisIndex;
var valueString = thisString;
var sourceObj = document.getElementById(objId);
var nowSelectedValue = document.getElementById(objId+ "SelectBoxOptionValue "+nowIndex).value;
hideOptionLayer(objId);
if (sourceObj) sourceObj.value = nowSelectedValue;
settingValue(objId,valueString);
selectBoxFocus(objId);
if (sourceObj.onchange) sourceObj.onchange();
}
function settingValue(thisId,thisString) {
var objId = thisId;
var valueString = thisString;
var selectedArea = document.getElementById(objId+ "selectBoxSelectedValue ");
if (selectedArea) selectedArea.innerText = valueString;
}
function viewOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+ "selectBoxOptionLayer ");
if (optionLayer) optionLayer.style.display = " ";
nowOpenedSelectBox = objId;
setMousePosition( "inBox ");
}
function hideOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+ "selectBoxOptionLayer ");
if (optionLayer) optionLayer.style.display = "none ";
}
function setMousePosition(thisValue) {
var positionValue = thisValue;
mousePosition = positionValue;
}
function clickMouse() {
if (mousePosition == "out ") hideOptionLayer(nowOpenedSelectBox);
}
function selectBoxFocus(thisId) {
var objId = thisId;
var obj = document.getElementById(objId + "selectBoxSelectedValue ");
obj.className = "selectBoxSelectedAreaFocus ";
obj.focus();
}
function selectBoxBlur(thisId) {
var objId = thisId;
var obj = document.getElementById(objId + "selectBoxSelectedValue ");
obj.className = "selectBoxSelectedArea ";
}
function makeSelectBox(thisId) {
var downArrowSrc = "myfile/img/bt_down01.gif ";//自定义下拉箭头的图片路径
var downArrowSrcWidth = 16;//箭头的宽度
var optionHeight = 19; // 选项的高度
var optionMaxNum = 7; // 显示最多选项的数量
var optionInnerLayerHeight = " ";
var objId = thisId;
var obj = document.getElementById(objId);
var selectBoxWidth = parseInt(obj.style.width);
var selectBoxHeight = parseInt(obj.style.height);
if (obj.options.length > optionMaxNum) optionInnerLayerHeight = "height: "+ (optionHeight * optionMaxNum) + "px ";
newSelect = " <table id= ' " + objId + "selectBoxOptionLayer ' cellpadding= '0 ' cellspacing= '0 ' border= '0 ' style= 'position:absolute;z-index:100;display:none; ' onMouseOver=\ "viewOptionLayer( ' "+ objId + " ')\ " onMouseOut=\ "setMousePosition( 'out ')\ "> ";
newSelect += " <tr> ";
newSelect += " <td height= ' " + selectBoxHeight + " ' style= 'cursor:hand; ' onClick=\ "hideOptionLayer( ' "+ objId + " ')\ "> </td> ";
newSelect += " </tr> ";
newSelect += " <tr> ";
newSelect += " <td height= '1 '> </td> ";
newSelect += " </tr> ";
newSelect += " <tr> ";
newSelect += " <td bgcolor= '#D3D3D3 '> ";
newSelect += " <div class= 'selectBoxOptionInnerLayer ' style= 'width: " + (selectBoxWidth-1) + "px; " + optionInnerLayerHeight + " '> ";
newSelect += " <table cellpadding= '0 ' cellspacing= '0 ' border= '0 ' width= '100% ' style= 'table-layout:fixed;word-break:break-all; '> ";
for (var i=0 ; i < obj.options.length ; i++) {
var nowValue = obj.options[i].value;
var nowText = obj.options[i].text;
newSelect += " <tr> ";
newSelect += " <td height= ' " + optionHeight + " ' class= 'selectBoxOption ' onMouseOver=\ "this.className= 'selectBoxOptionOver '\ " onMouseOut=\ "this.className= 'selectBoxOption '\ " onClick=\ "selectThisValue( ' "+ objId + " ', " + i + ", ' " + nowValue + " ', ' " + nowText + " ')\ " style= 'cursor:hand; '> " + nowText + " </td> ";
newSelect += " <input type= 'hidden ' id= ' "+ objId + "SelectBoxOptionValue " + i + " ' value= ' " + nowValue + " '> ";
newSelect += " </tr> ";
}
newSelect += " </table> ";
newSelect += " </div> ";
newSelect += " </td> ";
newSelect += " </tr> ";
newSelect += " </table> ";
newSelect += " <table cellpadding= '0 ' cellspacing= '1 ' border= '0 ' bgcolor= '#D3D3D3 ' onClick=\ "viewOptionLayer( ' "+ objId + " ')\ " style= 'cursor:hand; '> ";
newSelect += " <tr> ";
newSelect += " <td style= 'padding-left:1px ' bgcolor= '#FFFFFF '> ";
newSelect += " <table cellpadding= '0 ' cellspacing= '0 ' border= '0 '> ";
newSelect += " <tr> ";
newSelect += " <td> <div id= ' " + objId + "selectBoxSelectedValue ' class= 'selectBoxSelectedArea ' style= 'width: " + (selectBoxWidth - downArrowSrcWidth - 4) + "px;height: " + (selectBoxHeight - 2) + "px;overflow:hidden; ' onBlur=\ "selectBoxBlur( ' " + objId + " ')\ "> </div> </td> ";
newSelect += " <td> <img src= ' " + downArrowSrc + " ' width= ' " + downArrowSrcWidth + " ' border= '0 '> </td> ";
newSelect += " </tr> ";
newSelect += " </table> ";
newSelect += " </td> ";
newSelect += " </tr> ";
newSelect += " </table> ";
document.write(newSelect);
var haveSelectedValue = false;
for (var i=0 ; i < obj.options.length ; i++) {
if (obj.options[i].selected == true) {
haveSelectedValue = true;
settingValue(objId,obj.options[i].text);
}
}
if (!haveSelectedValue) settingValue(objId,obj.options[0].text);
}
document.onmousedown = clickMouse;
</script>
<style>
select {
BORDER-RIGHT: #d3d3d3 1px solid; BORDER-TOP: #d3d3d3 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #d3d3d3 1px solid; COLOR: #7f7f7f; BORDER-BOTTOM: #d3d3d3 1px solid; FONT-FAMILY: Dotum,Dotumche,verdana; HEIGHT: 18px
}
.box01 {
BORDER-RIGHT: #d3d3d3 1px solid; BORDER-TOP: #d3d3d3 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #d3d3d3 1px solid; COLOR: #7f7f7f; BORDER-BOTTOM: #d3d3d3 1px solid; FONT-FAMILY: Dotum,Dotumche,verdana; HEIGHT:
18px; BACKGROUND-COLOR: #ffffff
}
.selectBoxSelectedArea {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #7d838e; LINE-HEIGHT: 17px; PADDING-TOP: 1px; FONT-FAMILY: "宋体 "; BACKGROUND-COLOR: #ffffff
}
.selectBoxSelectedAreaFocus {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 1px; FONT-FAMILY: "宋体 "; BACKGROUND-COLOR: #ffffff
}
.selectBoxOption {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #7d838e; LINE-HEIGHT: 17px; PADDING-TOP: 2px; FONT-FAMILY: "宋体 "; BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionOver {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 2px; FONT-FAMILY: "宋体 "; BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionInnerLayer {
BORDER-RIGHT: #e4e4e4 1px solid; BORDER-TOP: #e4e4e4 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #d3d3d3; OVERFLOW: auto; BORDER-LEFT: #e4e4e4 1px solid; SCROLLBAR-SHADOW-COLOR: #d3d3d3; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #838383; SCROLLBAR-TRACK-COLOR: #eaeaea; BORDER-BOTTOM: #e4e4e4 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff
}
</style>
<script src= "selectBox.js " type= "text/javascript "> </script>
<select name= "select1 " style= "width:110px;height:18px;display:none; " id= "selectTest1 ">
<option selected= "selected "> ==请选择== </option>
<option value= "one "> 我是一个好人 </option>
<option value= "two "> 我是一个好人 </option>
<option value= "three "> 我是一个好人 </option>
<option value= "four "> 我是一个好人 </option>
<option value= "five "> 我是一个好人 </option>
<option value= "six "> 我是一个好人 </option>
<option value= "seven "> 我是一个好人 </option>
<option value= "eight "> 我是一个好人 </option>
<option value= "nine "> 我是一个好人 </option>
</select>
<script>
makeSelectBox( "selectTest1 ");
if( " " != " "){
selectValue6( 'selectTest1 ', document.form.select1, " ");
}
</script>
[解决办法]
没有其它办法了
[解决办法]
哈,写了一个。。。。你改下就可以用了的说。。。
<html>
<head>
<style type= "text/css ">
* {
font-size:12px;
color:#999999;
}
div.selectMenu {
width:0px;
height:16px;
float:none;
clear:both;
border:#CCCCCC 1px solid;
cursor:pointer;
}
div.cols {
float:left;
clear:right;
}
div.left {
width:110px;
padding-top:1px;
padding-left:2px;
padding-right:2px;
}
div.right {
width:17px;
}
div.option {
visibility:hidden;
position:absolute;
/*STATR此段FF无效*//*
height:50px;
overflow-x:hidden;
overflow-y:auto;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#D3D3D3;
scrollbar-shadow-color:#D3D3D3;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#838383;
scrollbar-track-color:#EAEAEA;
scrollbar-darkshadow-color:#FFFFFF;
/*END此段FF无效*/
border-left:#CCCCCC 1px solid;
border-right:#CCCCCC 1px solid;
border-bottom:#CCCCCC 1px solid;
cursor:pointer;
}
div.options {
background-color:#FFFFFF;
padding-top:2px;
padding-left:2px;
padding-right:2px;
}
</style>
<script type= "text/javascript ">
function $(id) {
return document.getElementById(id);
}
function selectMenu() {
/*
DIV模拟SELECT菜单
add方法添加div
然后修改div方法:
add方法:
添加option
add(value, innerHTML[, selected])
del方法
删除option
del(num)
upselected方法
修改当前selected为
upselected(num)
options.length方法
查看option个数
for in 可产看option元素集合
*/
var optionFontColor = [ "#004080 ", "#999999 "];
var optionBackGroundColor = [ "#EEEEEE ", "#FFFFFF "];
var onmouseDownObject;
if (/MSIE/.test(window.navigator.userAgent)) {
var widthCZ = 0, nodeNumber = 0;
} else {
var widthCZ = 4, nodeNumber = 1;
}
function createOption(o) {
//创建OPITON框
var d = document.createElement( "div ");
d.setAttribute( "class ", "option ");
d.setAttribute( "className ", "option ");
with (d.style) {
left = document.body.scrollLeft + o.offsetLeft + "px ";
top = document.body.scrollTop + o.offsetTop + o.offsetHeight + "px ";
width = (/MSIE/.test(window.navigator.userAgent) ? o.offsetWidth : o.clientWidth) + "px ";
}
d.parent = o;
return document.body.appendChild(d);
}
function createOptions(width) {
//创建OPITON元素框
var d = document.createElement( "div ");
d.setAttribute( "class ", "options ");
d.setAttribute( "className ", "options ");
d.style.color = optionFontColor[1];
d.style.width = width - widthCZ;
d.onmouseover = over;
d.onmouseout = out;
d.onmousedown = down;
return d;
}
function hiddenSelect(o) {
//隐藏菜单
o.style.visibility = "hidden ";
setStyle(o.parent.options[o.parent.selectedIndex], 0);
document.onmousedown = null;
}
function setSelectIndex(o, os) {
//设置selectIndex值
if (o.selectedIndex != null) {
setStyle(o.options[o.selectedIndex], 1);
}
o.selectedIndex = os.num;
setStyle(os, 0);
o.childNodes[nodeNumber].innerHTML = o.options[os.num].innerHTML;
}
function getObject(o, n) {
//根据值返回OPTION
var i = 0;
for (var item in o) {
if (item == "maxNum " || item == "length ") continue;
if (i == n) return o[item];
i ++;
}
}
function setStyle(o, n) {
//修改背景色和字颜色
if ( "undefined " != typeof o) {
with (o.style) {
color = optionFontColor[n];
backgroundColor = optionBackGroundColor[n];
}
}
}
var add = function (value, text, selected) {
//执行创建option元素
var o = createOptions(this.option.clientWidth);
o.innerHTML = text;
o.value = value;
if (this.deloptions.length == 0) {
o.num = this.options.maxNum ++;
} else {
o.num = this.deloptions.pop();
}
this.options[o.num] = o;
if (selected == true || this.options.length == 0)
setSelectIndex(this, o);
this.option.appendChild(o);
this.options.length ++;
}
var del = function (n) {
//删除OPTION
var o = getObject(this.options, n);
if ( "undefined " == typeof o) return;
this.deloptions.push(o.num);
delete this.options[o.num];
this.option.removeChild(o);
this.options.length --;
}
var upselected = function (n) {
//修改SELECTED
var o = getObject(this.options, n);
if ( "undefined " == typeof o) return;
setSelectIndex(this, o);
}
var over = function () {
//鼠标经过OPTION时
var root = this.parentNode.parent;
setStyle(root.options[root.selectedIndex], 1);
setStyle(this, 0);
}
var out = function () {
//鼠标移开OPTION时
var root = this.parentNode.parent;
if (root.options[root.selectedIndex] != this) {
setStyle(this, 1);
}
}
var down = function () {
//当鼠标按下的时候付值并且隐藏菜单
setSelectIndex(this.parentNode.parent, this);
hiddenSelect(this.parentNode);
}
var oDown = function () {
//当鼠标单击Select的时候,隐藏/显示菜单。
var o = this;
if (o.option.style.visibility != "visible ") {
o.option.style.visibility = "visible ";
onmouseDownObject = o;
document.onmousedown = dDown;
} else {
hiddenSelect(o.option);
}
}
var dDown = function (e) {
//当鼠标单击别处的时候,隐藏菜单。
var o = onmouseDownObject, os = o.option;
var e = window.event || e;
var x = e.clientX + document.body.scrollLeft, y = e.clientY + document.body.scrollTop;
if (x < os.offsetLeft || x > (os.offsetLeft + os.offsetWidth) ||
y < (os.offsetTop - o.offsetHeight) || y > (os.offsetTop + os.offsetHeight)) {
hiddenSelect(o.option);
}
}
this.add = function (o) {
//创建SELECT菜单
o.style.width = (/MSIE/.test(window.navigator.userAgent) ? 127 : 131);
o.option = createOption(o);
o.selectedIndex = null;
o.options = new Object();
o.deloptions = new Array();
o.options.maxNum = 0;
o.options.length = 0;
o.add = add;
o.del = del;
o.upselected = upselected;
o.onmousedown = oDown;
}
}
window.onload = function () {
var menu = new selectMenu;
var wc1 = $( "wc1 ");
var wc2 = $( "wc2 ");
menu.add(wc1);
menu.add(wc2);
menu = null;
wc1.add( "scan ", "菜单内容好多的说 ");
wc1.add( "Name ", "WC ");
wc1.add( "Age ", 18);
wc1.add( "Name1 ", "WC1 ");
wc1.add( "Age1 ", 18.1);
wc1.add( "Name2 ", "WC2 ");
wc1.del(2);
wc1.upselected(0);
wc2.add( "scan ", "菜单内容好多的说 ");
wc2.add( "Name ", "WC ");
wc2.add( "Age ", 18, true);
window.status = wc1.options.length;
}
</script>
</head>
<body>
<center>
<div id= "wc1 " class= "selectMenu ">
<div class= "cols left "> </div>
<div class= "cols right "> <div align= "right "> <img src= "select_Img.gif " /> </div> </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id= "wc2 " class= "selectMenu ">
<div class= "cols left "> </div>
<div class= "cols right "> <div align= "right "> <img src= "select_Img.gif " /> </div> </div>
</div>
</center>
</body>
</html>
[解决办法]
这个不能用title的
[解决办法]
我之前有写过一个,客户要select禁用还要那个滚动条能拖动…………
你改一下
在ff下还算正常,opera下不正常
<!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 " />
<meta name= "author " content= " " />
<meta name= "keywords " content= " " />
<meta name= "description " content= " " />
<title> 无标题文档 </title>
<style type= "text/css ">
optgroup{color:#ccc; font-size:9px; font-weight:bold;}
.selected{background-color:#119; color:#fff;}
.asdf{width:100px; height:40px; overflow:auto; overflow-y:auto; overflow-x:hidden; border-top:3px ridge #ccc; border-left:3px ridge #ccc; border-bottom:3px inset #ddd; border-right:3px inset #ddd;}
.simulateSelect{color:#999; overflow:auto; overflow-y:auto; overflow-x:hidden; border-top:3px ridge #ccc; border-left:3px ridge #ccc; border-bottom:3px inset #ddd; border-right:3px inset #ddd;}
</style>
<script type= "text/javascript ">
var getPosition = function(o) {
var left= 0;
var top= 0;
while (o.offsetParent)
{
left+= o.offsetLeft;
top+= o.offsetTop;
o = o.offsetParent;
}
left+= o.offsetLeft;
top+= o.offsetTop;
return {x:left, y:top}
}
</script>
</head>
<body>
<div class= "asdf ">
asdf <br/>
asdf <br/>
asdf <br/>
asdf <br/>
asdf <br/>
asdf <br/>
asdf <br/>
asdf <br/>
</div>
<br/>
<br/>
<select multiple= "true " disabled= "true ">
<option vlaue= "1 "> asdf1 </option>
<option vlaue= "2 " selected= "true "> asdf2 </option>
<option vlaue= "3 "> asdf3 </option>
<option vlaue= "4 "> asdf4 </option>
<option vlaue= "5 " selected= "true "> asdf5 </option>
<option vlaue= "6 "> asdf6 </option>
<option vlaue= "7 "> asdf7 </option>
<option vlaue= "8 "> asdf8 </option>
<option vlaue= "9 "> asdf9 </option>
</select>
<script type= "text/javascript ">
var sels = document.getElementsByTagName( "select ");
for (var i=0; i <sels.length; i++) {
var sel = sels[i];
//单行还是双行
//if (sel.disabled) {
if (sel.disabled && sel.multiple) {
var h = sel.offsetHeight;
var w = sel.offsetWidth;
var div = document.createElement( "div ");
div.style.height = h + "px ";
div.style.width= w + "px ";
div.style.overflow = "auto ";
div.className = "simulateSelect ";
div.onselectstart = function(){return false;};
var p = getPosition(sel);
div.style.position = "absolute ";
div.style.left = p.x + "px ";
div.style.top = p.y + "px ";
div.style.zIndex = "999 ";
for (var j=0; j <sel.options.length; j++) {
var d = document.createElement( "div ");
var opt = sel.options[j];
d.innerHTML = d.title = opt.innerHTML;
if (opt.getAttribute( "selected ")) d.className= "selected ";
div.appendChild(d);
}
sel.parentNode.insertBefore(div,sel);
sel.parentNode.removeChild(sel);
}
}
</script>
</body>
</html>
[解决办法]
<span style= "width:60px;overflow:hidden ">
<select name= "sel " id= "sel " style= "width:100px;margin-left:-40px " size= "1 " >
<option value= "1 " title= "中华人民共和国 " > 中华人民共和国 </option>
<option value= "2 " title= "发财改革委员会 "> 发财改革委员会 </option>
<option value= "3 " title= "cccccc "> cccccc </option>
</select> </span>
这个能显示title不过感觉比较怪!
[解决办法]
- -#
是挺怪,而且TITLE没有显示。
[解决办法]
LZ跑路了,我们也飘走吧。。。
[解决办法]
贴出来呗?
[解决办法]
http://community.csdn.net/Expert/topic/5304/5304128.xml?temp=2.218264E-02
我修改了下。。现在只需要DIV即可使用兼容IE FF
[解决办法]
记号
[解决办法]
建一个div模拟一个了。。也不难
[解决办法]
辛苦了!...
[解决办法]
<!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> DIV模拟select </title>
</head>
<body>
<script language= "javascript ">
//*****************************************************************************
// Do not remove this notice.
//
// Copyright 2007 by whb147(苦乐随缘).
// 特别感谢CSDN的兄弟大力支持
//*****************************************************************************
function Option(html, value, css, selected) {
this.text = html;
this.value = value;
this.css = css;
this.selected = selected;
}
function selectWhb(name)
{
this.name = name;
this.id = name;
this.flag = false;
this.width = 125;
this.height = 25;
this.fontSize = 10;
this.dataArray = new Array();
this.init = selectInit;
this.writeCss = writeCssSlt;
this.writeObject = writeSelect;
this.onClickBtn = onClickSlt;
this.onSelected = onSelectedSlt;
this.onClickContent = onClickContent;
this.hiddenDiv = hiddenDiv;
this.changeColor = changeColor;
this.changeColorBack = changeColorBack;
this.addOption = addItem;
}
function addItem(text,value)
{
this.dataArray[this.dataArray.length] = new Option(text,value);
}
function selectInit()
{
this.width = 125;
this.heighr = 25;
this.fontSize = 10;
this.writeCss(this);
this.writeObject(this);
}
function writeCssSlt()
{
var textWight = this.width-35;
var contentWight = this.width-10;
document.write( " <style type=\ "text/css\ "> ");
document.write( ".selectWhb147{width: "+this.width+ "px;border:0px solid #cccccc;z-index:1;font-size: "+this.fontSize+ "pt;border:0px solid red;} ");
document.write( ".divText{ border:1px solid #cccccc; width: "+textWight+ "px; height:15px; padding-left:5px; padding-top:6px;padding-bottom:0px;z-index:2;color:#0000FF; float:left;overflow:hidden;} ");
document.write( ".divContent{border:1px solid #CCCCCC; border-top:0px solid #cccccc; width: "+contentWight+ "px; z-index:3;display: none; padding:0px;position:absolute;background:#f7f7f7} ");
document.write( ".divButton{cursor:hand; width:10px; z-index:4; border:1px solid #cccccc; border-left:0px solid #cccccc; ");
document.write( "VERTICAL-ALIGN: middle; COLOR: #2050b0; WRITING-MODE: tb-rl; HEIGHT: 15px; padding-top:6px;background:#f0f0f0;font-size:14pt; ");
document.write( "FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ffffff, EndColorStr=#cccccc); float:left;} ");
document.write( ".liCss{list-style-type:none;cursor:hand; margin:0px;font-size: "+this.fontSize+ "pt;overflow:hidden;width: "+contentWight+ "px;height:16px;border:0px solid red;margin:0px;word-break:keep-all;padding-top:5px;} ");
document.write( " </style> ");
}
function writeSelect()
{
document.write( " <div id=\ "selectWhb147 "+this.name+ "\ " class=\ "selectWhb147\ "> <input type=\ "hidden\ " name=\ " "+this.name+ "\ " id=\ " "+this.id+ "\ " /> ");
document.write( " <div id=\ "divText "+this.name+ "\ " class=\ "divText\ "> </div> <div id=\ "divButton "+this.name+ "\ " class=\ "divButton\ " onClick=\ " "+this.name+ ".onClickBtn( 'divContent "+this.name+ " ');\ " > > </div> ");
document.write( " <br> <div id=\ "divContent "+this.name+ "\ " class=\ "divContent\ " onClick=\ "onClickContent( 'divContent "+this.name+ " ')\ " > ");
for(var i=0 ;i <this.dataArray.length;i++)
{
document.write( " <p onClick=\ " "+this.name+ ".onSelected(this)\ " onMouseMove= 'changeColor(this) ' onMouseOut= 'changeColorBack(this) ' class=\ "liCss\ " ");
document.write( "value=\ " "+this.dataArray[i].value+ "\ " title=\ " "+this.dataArray[i].text+ "\ "> "+this.dataArray[i].text+ " </p> ");
}
document.write( " </div> ");
document.write( " </div> ");
}
function onSelectedSlt(obj)
{
document.getElementById( "divText "+this.name).innerText=obj.innerText;
document.getElementById( "divText "+this.name).title=obj.innerText;
document.getElementById(this.id).value = obj.value;
//alert(document.getElementById(this.id).value);
}
function onClickSlt(obj)
{
if (this.flag==false)
{
document.getElementById(obj).style.display= "block ";
flag=true;
}
else
{
document.getElementById(obj).style.display= "none ";
this.flag=false;
}
}
function onClickContent(obj)
{
document.getElementById(obj).style.display= "none ";
this.flag=false;
}
function hiddenDiv()
{
if (this.flag==true)
document.getElementById( 'divContent ').style.display= "block ";
}
function changeColor(obj)
{obj.style.backgroundColor= "#e1e1e1 ";}
function changeColorBack(obj)
{obj.style.backgroundColor= " ";}
</script>
<table width= "500 " border= "1 " cellspacing= "1 " cellpadding= "1 " style= "width:200px; ">
<tr>
<td style= "width:150px; ">
<script>
var objSelect = new selectWhb( "objSelect ");
objSelect.addOption( "中华人民共和国万万岁 ", "1 ");
objSelect.addOption( "发财改革委员会 ", "2 ");
objSelect.addOption( "中国工商银行中国工商银行 ", "3 ");
objSelect.init();
</script>
</td>
<td> </td>
</tr>
<tr>
<td>
<script>
var objSelect2 = new selectWhb( "objSelect2 ");
objSelect2.addOption( "中华人民共和国万万岁 ", "1 ");
objSelect2.addOption( "发财改革委员会 ", "2 ");
objSelect2.addOption( "中国工商银行中国工商银行 ", "3 ");
objSelect2.init();
</script>
</td>
<td>
<script>
var objSelect3 = new selectWhb( "objSelect3 ");
objSelect3.addOption( "中华人民共和国万万岁 ", "1 ");
objSelect3.addOption( "发财改革委员会 ", "2 ");
objSelect3.addOption( "中国工商银行中国工商银行 ", "3 ");
objSelect3.init();
</script> </td>
</tr>
</table>
</body>
</html>
[解决办法]
大家继续啊~~
再写个可以输入又可以选择的
偶9=着用了
[解决办法]
..看来不行,这个东西挺有性格......飘走...
[解决办法]
to LZ
测试哪个?
hzl126(不再言爱)
贴的那个FF下测试不通过的说。。
[解决办法]
我就装了个FF和IE6。。。。
[解决办法]
忽忽。都测试了。。完全一样的效果。。
[解决办法]
把innerText替换成innerHTML就可以啦。^o^
[解决办法]
流汗~~~
firefox和ie7下都正常~~~~~~~~
楼主~~~~~~
[解决办法]
忽忽。。。
我也在写。。正在处理滚动条。。
to myzee(曾经是 zh-cn)
帮我测下IE7(本来想下一个后来找了下没找到,就没有下)。。。
地址。。
http://www.zhb.org.cn/wc/select/select.htm
[解决办法]
测试完啦...没有发表言论..忽忽...我给你在测试测试..我装了3个浏览器。..
IE6测试通过
Opera测试时..能点卡,移开没有隐藏..
并且...大小也有显示问题...
FF测试完全不通过...能点开,但是点完了没有付值,并且移开时也没有隐藏.
没有付值的原因是LZ使用了innerText
[解决办法]
都是高人那。。。不过。。似乎都没title?
[解决办法]
忽忽..LZ的意思只是显示完全...他做的那个已经实现了效果..如果非要实现象title那样的效果,也可以另做.但是用select元素就不可以啦...
[解决办法]
哪位顺便给来个漂亮点的酷点的弹出窗口?
[解决办法]
http://community.csdn.net/Expert/topic/5312/5312786.xml?temp=.4752161
里面最后一楼的兄弟提供了个地址..里面貌似有好多特效的样子..你去找找看有没心仪的..
[解决办法]
哦,小雨在线,我都翻了好几次了。。没什么特别好看的。。。
他那里弹出的特效比较少
[解决办法]
汗!
难道这个需要重新模拟一个select么?
可以通过js来判断当前的value,动态的显示一个div的内容,位置以及可见性啊
[解决办法]
为什么都喜欢把问题复杂化?
[解决办法]
opear和ff当鼠标移开的时候还是没有隐藏...^o^
to libao1983 SELECT元素展开的时候options的onmouseover之类是不会触发的...
[解决办法]
我顺便问个问题...当我移过某东西的时候怎么触发一个东西...
因为我拖拽着一个东西..所以说不可能触发经过的那个东西onmouseover因为它被盖了..
先回家啦...
[解决办法]
http://www.atsky.cn/temp/select.asp
IE6:正常
Maxthon2.0.1:正常
ff2.0.0.1:正常
Opera 9.0.1:当鼠标移开的时候列表没有隐藏.选中后会隐藏
[解决办法]
高人不少,先mark,回头研究
[解决办法]
正好用到,顶!
[解决办法]
http://community.csdn.net/Expert/topic/5317/5317894.xml?temp=.8809473
这个帖子,你看下..我处理的时候用的是便利搜索...
如果可以触发onmouseover就不用这样了..可以节省好多资源的说...
就是说.我拖拽了一个东西.这个东西在鼠标的下面..
然后在这个东西西面有个东西..
我想当鼠标拽那个东西经过..最下面的东西的时候触发某事件..
有直接的方法么?
- -#
[解决办法]
如果不能还想问个问题^o^
就是说...我鼠标拖拽的时候有好多东西都被..反色了...不想出现那种情况怎么弄?
同时我也不想从
onmousemove里加return false;
怎么解决呢?
[解决办法]
忽...IE6 Opera FF测试均通过..
不过Opera的高度还需要设置一下..^o^