下拉框如何固定行数


<script language='javascript'> 
  function aaa() 
  { 
    var obj = document.getElementById("fruit"); 
    obj.size=3; 
    obj.onchange = function(e)
    {
     obj.size = 1;
     obj.blur();
    }
    return false; 
  } 
</script> 
<select id='fruit'  name="select" onfocus="aaa();"> 
    <option>1 </option> 
    <option>2 </option> 
    <option>3 </option> 
    <option>4 </option> 
    <option>5 </option> 
    <option>6 </option> 
    <option>7 </option> 
    <option>8 </option> 
    <option>9 </option> 
    <option>10 </option> 
</select> 

解决方案 »

  1.   

    <script language='javascript'> 
    document.onclick=function(e){
      e=e||event;
      var obj=e.srcElement||e.target;
      var o= document.getElementById("fruit");
      if(obj==o){
        if(o.size=="1")o.size=5;
        else o.size=1;
      }else o.size=1; 
    }
    </script> 
    <select id='fruit'  name="select"  size="1" > 
        <option>1 </option> 
        <option>2 </option> 
        <option>3 </option> 
        <option>4 </option> 
        <option>5 </option> 
        <option>6 </option> 
        <option>7 </option> 
        <option>8 </option> 
        <option>9 </option> 
        <option>10 </option> 
    </select> 
      

  2.   

    我想实现下拉框的功能的初始状态为：http://xa.photo.store.qq.com/rurl2=2cb81c8b2ad1334307e77b1592a716f2b11ad766f55917f02504237450aa2a658b845a1b69e78fd6ed24a57510871779c6134f198b6f285d017f249f3f6cf92bdc5803c38959cf2b0b0801189ce0df456b808101，此下拉框中有10个数据项， 我想实现下拉框的功能的最终状态为： 
    http://xa.photo.store.qq.com/rurl2=00d2deff70c1e9be93e3bdfd63626711738fd878975968e5641a13337e3f43683484f448ef66b72eacc14332abb0da5e5a6c202ac351d54e3761cf9037256bacf69cdd801b0f0a2b5207af531e9d4d78f28714fb 
    请会做的大哥帮忙下，谢谢
      

  3.   

    我想实现下拉框的功能的初始状态为：http://xa.photo.store.qq.com/rurl2=2cb81c8b2ad1334307e77b1592a716f2b11ad766f55917f02504237450aa2a658b845a1b69e78fd6ed24a57510871779c6134f198b6f285d017f249f3f6cf92bdc5803c38959cf2b0b0801189ce0df456b808101，此下拉框中有10个数据项， 我想实现下拉框的功能的最终状态为： 
    http://xa.photo.store.qq.com/rurl2=00d2deff70c1e9be93e3bdfd63626711738fd878975968e5641a13337e3f43683484f448ef66b72eacc14332abb0da5e5a6c202ac351d54e3761cf9037256bacf69cdd801b0f0a2b5207af531e9d4d78f28714fb 
    请会做的大哥帮忙下，谢谢
      

  4.   

    看不见图片如果不用size来控制，只好用div模拟了我的那个你选择项后变1，只是下拉显示5项的时候会变列表框
      

  5.   

    搞不懂，又没图，不行就用AJAX处理算了，点一下出5个
      

  6.   

    是这样吗
    <select name="select" size="5"> 
        <option selected>1 </option> 
        <option>2 </option> 
        <option>3 </option> 
        <option>4 </option> 
        <option>5 </option> 
        <option>6 </option> 
        <option>7 </option> 
        <option>8 </option> 
        <option>9 </option> 
        <option>10 </option> 
      </select>
      

  7.   

    我给出图片的连接地址了啊，没有达到我想要的效果哦，我用了DW里的div层了，没有能够实现，我没有办法实现我想要的效果了
      

  8.   


    还有一个办法就是根本就不要用所谓的下拉框了．直接一个text框再加上一个div来实现就ＯＫ了．
      

  9.   

    怎么同样的问题发三个帖子啊。汗 一一回复
    这次应该是你要的效果了吧，ie6 ie7 FF全部通过测试 <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script> 
    function f(sel1) 
    { 
    var sel2=document.getElementById('select2'); 
    var i=sel2.selectedIndex>0 ?sel2.selectedIndex :0; 
    var name =sel2.options[i].innerHTML; 
    var tmp=new Option(name,sel2.value); 
    sel1.options[0]=tmp; 
    sel2.style.display='inline'; 
    sel1.style.width=sel2.offsetWidth; 
    sel2.focus(); 
    } 
    function c(sel2) 
    { 
    var sel1=document.getElementById('select1'); 
    var i=sel2.selectedIndex>0 ?sel2.selectedIndex :0; 
    var name =sel2.options[i].innerHTML; 
    var temp=new Option(name,sel2.value); 
    sel1.options[0]=temp; 
    sel2.style.display="none"; } 
    </script> 
    </head> 
    <body> 
    <select id="select1" onFocus="f(this)"> 
    <option>dhh </option> 
    </select> <br> 
    <select id="select2"  name="select" size="5" style="display:none;" onChange="c(this)" onBlur="this.style.display='none'"> 
        <option>dhh </option> 
        <option>bbb </option> 
        <option>3 </option> 
        <option>4 </option> 
        <option>5 </option> 
        <option>6 </option> 
        <option>7 </option> 
        <option>8 </option> 
        <option>9 </option> 
        <option>10 </option> 
      </select> 
    </body> 
    </html> 
      

  10.   

    离他要的效果已经很接近了．
    但是其实还是能看到第一个select下拉的过程的．
      

  11.   

    Sorry. 我只是关注一下，这不是我提的问题，呵呵．