87,907
社区成员
发帖
与我相关
我的任务
分享三个关于 select 的小问题[100分]
(1)如何使 select 不显示滚动条？
(2)怎么知道 select 的滚动条位置发生了变化？onScroll 没有效果啊！
(3)如何使 select 不显示边框或者只显示 4 个边框中的指定几个？
(2)怎么知道 select 的滚动条位置发生了变化？onScroll 没有效果啊！
(3)如何使 select 不显示边框或者只显示 4 个边框中的指定几个？
...全文
请发表友善的回复…
发表回复
炜娓道来程序人生 2003-03-11
- 打赏
- 举报
收藏
2ndboy 2003-03-11
- 打赏
- 举报
这是我现在做出来的效果：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script laguage="JavaScript">
function OnMOver( O )
{
if( O.getAttribute( "Selected" ) == "1" )
O.bgColor = "#FF0000";
else
O.bgColor = "#0000FF";
}
function OnMOut( O )
{
if( O.getAttribute( "Selected" ) == "1" )
O.bgColor = "#00FF00";
else
O.bgColor = "";
}
function OnMClick( O )
{
if( O.getAttribute( "Selected" ) == "1" )
{
O.setAttribute( "Selected","0" );
O.bgColor = "#0000FF";
}
else
{
O.setAttribute( "Selected","1" );
O.bgColor = "#FF0000";
}
}
</script>
<style>
<!--
td { font-size: 9pt }
-->
</style>
</head>
<body>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr onMouseOver="OnMOver(this);" onMouseOut="OnMOut(this);" onClick="OnMClick(this);">
<td width="25%">Apple</td>
<td width="25%">Microsoft</td>
<td width="25%">IBM</td>
<td width="25%">CA</td>
</tr>
<tr onMouseOver="OnMOver(this);" onMouseOut="OnMOut(this);" onClick="OnMClick(this);">
<td width="25%">123</td>
<td width="25%">456</td>
<td width="25%">789</td>
<td width="25%">012</td>
</tr>
<tr onMouseOver="OnMOver(this);" onMouseOut="OnMOut(this);" onClick="OnMClick(this);">
<td width="25%">abc</td>
<td width="25%">def</td>
<td width="25%">ghi</td>
<td width="25%">jkl</td>
</tr>
</table>
</center>
</div>
</body>
</html>
有几个问题：
(1)我想在选中一项之后让其它项都不被选中，怎么遍历所有 tr 元素呢？
(2)如何为表格加上滚动条（这样看起来才象 select）
(3)改变背景色我会了，又如何改变表格文字颜色呢？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script laguage="JavaScript">
function OnMOver( O )
{
if( O.getAttribute( "Selected" ) == "1" )
O.bgColor = "#FF0000";
else
O.bgColor = "#0000FF";
}
function OnMOut( O )
{
if( O.getAttribute( "Selected" ) == "1" )
O.bgColor = "#00FF00";
else
O.bgColor = "";
}
function OnMClick( O )
{
if( O.getAttribute( "Selected" ) == "1" )
{
O.setAttribute( "Selected","0" );
O.bgColor = "#0000FF";
}
else
{
O.setAttribute( "Selected","1" );
O.bgColor = "#FF0000";
}
}
</script>
<style>
<!--
td { font-size: 9pt }
-->
</style>
</head>
<body>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr onMouseOver="OnMOver(this);" onMouseOut="OnMOut(this);" onClick="OnMClick(this);">
<td width="25%">Apple</td>
<td width="25%">Microsoft</td>
<td width="25%">IBM</td>
<td width="25%">CA</td>
</tr>
<tr onMouseOver="OnMOver(this);" onMouseOut="OnMOut(this);" onClick="OnMClick(this);">
<td width="25%">123</td>
<td width="25%">456</td>
<td width="25%">789</td>
<td width="25%">012</td>
</tr>
<tr onMouseOver="OnMOver(this);" onMouseOut="OnMOut(this);" onClick="OnMClick(this);">
<td width="25%">abc</td>
<td width="25%">def</td>
<td width="25%">ghi</td>
<td width="25%">jkl</td>
</tr>
</table>
</center>
</div>
</body>
</html>
有几个问题：
(1)我想在选中一项之后让其它项都不被选中，怎么遍历所有 tr 元素呢？
(2)如何为表格加上滚动条（这样看起来才象 select）
(3)改变背景色我会了，又如何改变表格文字颜色呢？
2ndboy 2003-03-11
- 打赏
- 举报
如何为页面中的表格加上滚动条呢？用层吗？
fason 2003-03-11
- 打赏
- 举报
1.看上面贴的代码
2.表格里面套层,style="overflow:scroll"
3.this.style.color="red"//改变为红色
2.表格里面套层,style="overflow:scroll"
3.this.style.color="red"//改变为红色
fason 2003-03-10
- 打赏
- 举报
<table cellpadding="0" cellspacing="0" border="0" width="100">
<tr>
<td id="selectLength" width="100%" style="height:20px;padding:0px;border:2px inset #404040;border-right:0px;border-bottom:1px solid #D4D0C8;font-size:9pt;">
<div id="selectedValue" style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>
</td>
<td width="20" style="height:20px;padding:0px;border-top:2px inset #404040;border-left:0px;border-right:1px solid #D4D0C8;border-bottom:1px solid #D4D0C8;font-size:9pt">
<img src="button2.gif" width="20" height="21" border="0" id="mm" onclick="mm_Click()" align="middle">
</td>
</tr>
</table>
<div id="dropdownOption" style="position:absolute;visibility:hidden;width:100%;border:1px solid #080808;z-index:1000">
<table width="100%" cellpadding="0" cellspacing="1" bgcolor="White">
<tr onmouseover=this.bgColor='blue' onmouseout=this.bgColor=''>
<td onclick="document.all.selectedValue.innerText=this.innerText">
1
</td>
</tr>
<tr onmouseover=this.bgColor='blue' onmouseout=this.bgColor=''>
<td onclick="document.all.selectedValue.innerText=this.innerText">
2
</td>
</tr>
<tr onmouseover=this.bgColor='blue' onmouseout=this.bgColor=''>
<td onclick="document.all.selectedValue.innerText=this.innerText">
3
</td>
</tr>
</table>
</div>
<script>
function mm_Click()
{
if(document.all.dropdownOption.style.visibility == 'visible')
document.all.dropdownOption.style.visibility='hidden'
else
document.all.dropdownOption.style.visibility='visible'
}
function init(){
document.all.dropdownOption.style.width = document.all.selectLength.clientWidth + 22;
document.all.selectedValue.contentEditable = true;
var strTop = 0;
var strLeft = 0;
var e1 = document.all.selectLength;
while(e1.tagName != "BODY")
{
strTop += e1.offsetTop
strLeft += e1.offsetLeft
e1 = e1.offsetParent
}
document.all.dropdownOption.style.top = String(strTop + 24) + "px";
document.all.dropdownOption.style.left = String(strLeft) + "px";
}
function clickE()
{
if(window.event.srcElement.id !='mm')
document.all.dropdownOption.style.visibility='hidden';
}
document.onclick = clickE
window.onload = init
</script>
<tr>
<td id="selectLength" width="100%" style="height:20px;padding:0px;border:2px inset #404040;border-right:0px;border-bottom:1px solid #D4D0C8;font-size:9pt;">
<div id="selectedValue" style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>
</td>
<td width="20" style="height:20px;padding:0px;border-top:2px inset #404040;border-left:0px;border-right:1px solid #D4D0C8;border-bottom:1px solid #D4D0C8;font-size:9pt">
<img src="button2.gif" width="20" height="21" border="0" id="mm" onclick="mm_Click()" align="middle">
</td>
</tr>
</table>
<div id="dropdownOption" style="position:absolute;visibility:hidden;width:100%;border:1px solid #080808;z-index:1000">
<table width="100%" cellpadding="0" cellspacing="1" bgcolor="White">
<tr onmouseover=this.bgColor='blue' onmouseout=this.bgColor=''>
<td onclick="document.all.selectedValue.innerText=this.innerText">
1
</td>
</tr>
<tr onmouseover=this.bgColor='blue' onmouseout=this.bgColor=''>
<td onclick="document.all.selectedValue.innerText=this.innerText">
2
</td>
</tr>
<tr onmouseover=this.bgColor='blue' onmouseout=this.bgColor=''>
<td onclick="document.all.selectedValue.innerText=this.innerText">
3
</td>
</tr>
</table>
</div>
<script>
function mm_Click()
{
if(document.all.dropdownOption.style.visibility == 'visible')
document.all.dropdownOption.style.visibility='hidden'
else
document.all.dropdownOption.style.visibility='visible'
}
function init(){
document.all.dropdownOption.style.width = document.all.selectLength.clientWidth + 22;
document.all.selectedValue.contentEditable = true;
var strTop = 0;
var strLeft = 0;
var e1 = document.all.selectLength;
while(e1.tagName != "BODY")
{
strTop += e1.offsetTop
strLeft += e1.offsetLeft
e1 = e1.offsetParent
}
document.all.dropdownOption.style.top = String(strTop + 24) + "px";
document.all.dropdownOption.style.left = String(strLeft) + "px";
}
function clickE()
{
if(window.event.srcElement.id !='mm')
document.all.dropdownOption.style.visibility='hidden';
}
document.onclick = clickE
window.onload = init
</script>
2ndboy 2003-03-10
- 打赏
- 举报
看来 select 可以定制的东西太少了，那就通过其它途径实现吧。
我的需求是这样的：
要显示若干数据，而每个数据又有若干域，所以最好有一个类似 ListView 的控件，所以我想用 select 做一个，现在看来不太容易。
这些显示的数据是要被提交的，所以不能用表格（虽然表格可以解决我想对齐显示的需求）。
各位大侠有何建议？
用什么方法可以做一个可以单选、可以滚动、可以多域对齐又能提交的东西？
我的需求是这样的：
要显示若干数据，而每个数据又有若干域，所以最好有一个类似 ListView 的控件，所以我想用 select 做一个，现在看来不太容易。
这些显示的数据是要被提交的，所以不能用表格（虽然表格可以解决我想对齐显示的需求）。
各位大侠有何建议？
用什么方法可以做一个可以单选、可以滚动、可以多域对齐又能提交的东西？
2ndboy 2003-03-10
- 打赏
- 举报
to emu_ston(emu)：
(1)我就是要用 select 啊，怎么还要模拟 select？
(2)如何模拟，能说说吗？
(3)你给的例子是把四个边框都隐掉了，隐掉指定的一两个边框怎么做？我从这个例子上面实在做不到举一反三，信息太少了！
(1)我就是要用 select 啊，怎么还要模拟 select？
(2)如何模拟，能说说吗？
(3)你给的例子是把四个边框都隐掉了，隐掉指定的一两个边框怎么做？我从这个例子上面实在做不到举一反三，信息太少了！
shanxing 2003-03-10
- 打赏
- 举报
我想知道~~~
fason 2003-03-10
- 打赏
- 举报
哎,知道的都给说完了
孟子E章 2003-03-10
- 打赏
- 举报
http://lucky.myrice.com/temp/select.htm
emu_ston 2003-03-10
- 打赏
- 举报
1 除非模拟select
2 onpropertychange都不行，看来也只能用模拟的。
3 被问过很多次类似的了：
<span style="position:absolute">
<select style="margin=-2">
<option>abcdefg
</select>
</span>
2 onpropertychange都不行，看来也只能用模拟的。
3 被问过很多次类似的了：
<span style="position:absolute">
<select style="margin=-2">
<option>abcdefg
</select>
</span>
