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

最新推荐文章于 2024-03-17 20:14:27 发布

btbtd

最新推荐文章于 2024-03-17 20:14:27 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

文章标签： button iframe border function htc ie

本文链接：https://blog.youkuaiyun.com/btbtd/article/details/1413263

Me Script 专栏收录该内容

88 篇文章

订阅专栏

本文介绍了一种使用JavaScript和button标签来模拟select下拉列表的方法，解决了在iframe中使用时焦点转移的问题，并提供了完整的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 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.youkuaiyun.com/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>