使用 js + button标签模拟 select 列表框操作 By shawl.qiu

来源：互联网发布：淘宝旺铺模板编辑：程序博客网时间：2024/06/08 13:36

使用 js + button标签模拟 select 列表框操作 By shawl.qiu

说明:
我想在列表框中显示文本的时候, 可以用除 option标签外其他的标签定义显示效果.

但这显然是行不通的, CSS 也无法完成我需要的风格, 翻了一会HTC, 发现有个 public:defaults 属性, 貌似可以完成我需要的效果, 不会用...即使会用, 也不太可能会考虑使用 HTC(只能在IE上跑).

然后就考虑用其他方法模拟 select 操作流程了, 起初是使用 div+js+非控件标签模拟成功的.
但是有一个问题, 我模拟出来的 select 是针对 iframe 使用的.
期望是, 当我点击模拟的 select 下拉项时, 我在 iframe 里的焦点不变.
但是, 对于非控件标签的点击事件, IE 会立即转移页面焦点到非控件标签上.

因此, 在想了又想后, 才记得 button标签可以包含 HTML 标签, 这不, 就完成我需要的效果了.

模拟 select 的背景图片:
http://files.myopera.com/btbtd/albums/165232/select.png
Green Institute

shawl.qiu
2006-11-25
http://blog.csdn.net/btbtd

使用 js + button标签模拟 select 列表框实现代码:

linenum

<!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>shawl.qiu template</title>
<style type="text/css">
/* <![CDATA[ */
*{
margin:0px;
padding:0px;
}
.sqEditorCssSelect{
background: #fff url(sqEditor/images/select.png) no-repeat scroll;
background-position: right top;
width:120px;
height:21px;
border:1px solid black;
}
.sqEditorCssBorder{
border:1px solid blue;
margin:0px 0px 2px 0px;
display:block;
width:120px;
background-color:#fff;
}
/* ]]> */
</style>
<script type="text/javascript">
//<![CDATA[
function fSmltSle(obj, e){
if(!e)var e=window.event;
var ele=e.target||e.srcElement
fHidPrnt(obj);
obj.style.width=ele.offsetWidth+'px'
obj.style.left=ele.offsetLeft+'px';
obj.style.top=ele.offsetTop+ele.offsetHeight+'px';
for(var i=0; i<obj.childNodes.length; i++){
if(obj.childNodes[i].nodeType==1){
obj.childNodes[i].className='sqEditorCssBorder';
obj.childNodes[i].onclick=function(){
fHidPrnt(this.parentNode);
ele.innerHTML=this.childNodes[0].nodeName;
}
}
} // shawl.qiu script
}
function fHidPrnt(obj){
obj.style.display=='none'?obj.style.display='block':obj.style.display='none';
}
//]]>
</script>
</head>
<body>
      <button class="sqEditorCssSelect" onClick="fSmltSle(document.getElementById('ddFontsize'), event)">just a test</button>
<div style="position:absolute; display:none " id="ddFontsize">
<button><h1>h1</h1></button>
<button><h2>h2</h2></button>
<button><h3>h3</h3></button>
<button><h4>h4</h4></button>
<button><h5>h5</h5></button>
<button><h6>h6</h6></button>
</div>
<div style="text-align:center; ">some text for focus test.</div>
<textarea cols="60" rows="5">some text for focus test.</textarea><br />
<iframe src="about:blank" name="ifm"></iframe>
<script type="text/javascript">
//<![CDATA[
onload=function(){
frames['ifm'].document.write('ok');
frames['ifm'].document.close();
}
//]]>
</script>
</body>
</html>

使用 js + button标签 模拟 select 列表框 操作 By shawl.qiu