请问如何模拟点击下拉框??(能解决问题加到100分全送)

鼠标点击下拉框,下拉框就会张开让你选,我希望能用代码去控制让下来框张开其实主要是因为我需要改变下拉框那个箭头的样式,现在我放一张图片在上面,点击图片模拟点击下拉框如果能有代码改变下拉框下拉箭头的样式也感激不尽技术必须用select,只有select可以穿越浏览器<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
</HEAD> <BODY>
     <select name='search' id='search' style='width:100px' >
<option value='page_1.html' selected>1</option>
<option value='page_2.html'>2</option>
<option value='page_3.html'>3</option>
</select>
</BODY>
</HTML><script language="javascript">
document.getElementById('search').click();
</script>
上面那句是不行的

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<style type="text/css">
    #box{
        width:120px;
        font-family: "宋体";
        font-size: 12px;
        overflow: hidden;
        margin-top: 20px;
        margin-left: 100px;
        float: left;
    }
     #Abox{
         position:absolute;
         left:150px;
        width:120px;
        font-family: "宋体";
        font-size: 12px;
        overflow: hidden;
        margin-top: 120px;
        margin-left: 200px;
        float: left;
    }
    #hole {
        height: 300px;
        width: 500px;
        float: left;
    }    .box0{width:88px;
          height:21px;
          float:left;
          border-top-width: 1px;
          border-bottom-width: 1px;
          border-left-width: 1px;
          border-top-style: solid;
          border-bottom-style: solid;
          border-left-style: solid;
          border-top-color: #9C9C9C;
          border-bottom-color: #9C9C9C;
          border-left-color: #9C9C9C;
          line-height: 1.6;
          padding-left: 5px;
    }
    .box1{
        width:18px;
        height:21px;
        cursor:pointer;
        float:left;
        text-align:right;
        overflow: hidden;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-top-color: #9c9c9c;
        border-right-color: #9c9c9c;
        border-bottom-color: #9c9c9c;
    }    #items{
        border:1px solid black;
        width:98px;
        display:none;
        float: left;
    }
      #Aitems{
        border:1px solid black;
        width:98px;
        display:none;
        float: left;
    }
    .box3{
        width:96px;
    }    .over{
        background-color:#0066CC;
        font-weight:bold;
        color:#FFF;
        /*border-top:1px dotted black;
        border-bottom:1px dotted black;*/
        cursor:pointer;
        width: 96px;
    }
</style>
<script type="text/javascript">
    var oDiv0;
    var oDiv1;
    var oDiv;    window.onload=function(){
        oDiv0=document.getElementById("box0");
        oDiv1=document.getElementById("box1");
        oDiv=document.getElementById("items");        oDiv1.onclick=function(){
            oDiv.style.display=oDiv.style.display=="block"?"none":"block";
            show();
        }    }
    function hide(obj){
        var obj=obj;
        obj.parentNode.style.display="none";
    }
    function show(){
        for(var i=0;i<oDiv.childNodes.length;i++){
            oDiv.childNodes[i].onmouseover=function(){
                this.className="over";
            }
            oDiv.childNodes[i].onmouseout=function(){
                this.className="";
            }
            oDiv.childNodes[i].onclick=function(){
                oDiv0.innerHTML=this.innerHTML;
                hide(this);
            }
        }
    }

</script>
<body>
    <div id="hole">        <div id="box">
            <div id="box0" class="box0">不限</div>
            <div id="box1" class="box1"><img src="file:///D|/city/images/select2_12.gif" width="18" height="21"></div>
            <div id="items" style="">
                <div class="box3">1</div>
                <div class="box3">2</div>
                <div class="box3">3</div>
                <div class="box3">4</div>
            </div>
        </div>    </body>
如果用原生的select确是不好办..
//给楼主个思路细节自己处理
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <style>
  #otxt {
position: absolute;
float: left;
width: 100px;
  }
  #search {
position: relative;
top: 21px;
display: none;
  }  </style>
</HEAD> <BODY>
<div id="container">
<input type="text" id='otxt' >
        <select name='search' id='search' style='width:100px' size="4" onchange="document.getElementById('otxt').value= this.options[this.selectedIndex].text;this.style.display='none'">
            <option value='page_1.html' selected>1</option>
            <option value='page_2.html'>2</option>
            <option value='page_3.html'>3</option>
        </select>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input type="button" value="Close" onclick="closeSel();" />
</BODY>
</HTML><script language="javascript">
document.getElementById('search').style.display = "block";
function closeSel(){
document.getElementById('search').style.display = "none";
} </script>
感谢BeenZ   但是这个方法没有用   我强调了只能用select技术  div是无法穿越浏览器的  如果可以我用ext 的下拉框也很好改  ext是用div实现的所以没用
同样也非常感激   s_liangchao1s
size="4"  这中可以多选的下拉框也没能搞定,  他不能穿越浏览器各位大大如果有时间能帮小弟忙  麻烦把我的代码复制到html在浏览器运行   然后把浏览器下边框往上拉  拉到只能看到下拉框   然后点一下  下拉框,  下拉框是可以超越浏览器的下边界跑到外面来的  我需要的是这个效果
说一下我要干的事情  我做的是widget内嵌html 是一个号码搜索条需要用下拉框保存最近搜索的10个历史记录  这个搜索条widget的高度大概就30px  需要用select这个技术去穿越浏览器提供选择   但是样式需要调整不可以这么丑   请各位高手帮忙  感激不尽
动态写入select控件的option。这个可以实现，而且也简单的很。http://1229363.blog.163.com/blog/static/19743427200975103318421/
那确实无法用div,发现个不错的方法
http://hi.baidu.com/jihuo/blog/item/b7510a555f11a0c4b745ae0e.html下载那个代码来看看 htc做的
可以用popup写一个下拉框,可以穿越浏览器
楼上大哥不好意思  放假没留意  我先把分加好了邮箱   [email protected]非常感谢