select里的内容的显示问题

<select style=width:100 onchange="this.style.width=this.options[this.selectedIndex].text.length*7+25">
<option>12345
<option>1234567890
<option>123456789098765
<option>1234567890987654321
</select>

解决方案 »

  1.   

    不是动态的改变宽度
    而是当鼠标放到那个option的时候能出现提示
    像title那样的
      

  2.   

    <script>
    str="";
    mywidth=0;
    function showdiv(w)
    {
    w=100;
    document.all.mysel.style.display="none";
    str="<input type=text style='width:"+w+";border:1 solid #000000;' readOnly title="+document.all.mysel.options[document.all.mysel.selectedIndex].text+" onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";
    liststr="<table id=mytable width="+w+" cellspacing=0 cellpadding=0 style='border:1 solid #000000;table-layout:fixed'>";for(i=0;i<document.all.mysel.options.length;i++)
    liststr+="<tr><td style='font-size:10pt' onmouseover=myover() onmouseout=myout() onclick=myclick("+i+") title='"+document.all.mysel.options[i].text+"'>"+document.all.mysel.options[i].text+"&nbsp;&nbsp;&nbsp;</td></tr>";
    liststr+="</table>";
    likesel.innerHTML=str;
    mywidth=w;
    }
    function showlist()
    {
    tempstr=likesel.innerHTML+"";
    if(tempstr.length<liststr.length)
    likesel.innerHTML+=liststr;
    document.all.mytable.style.display='block';
    }
    function myover()
    {
    event.srcElement.style.cursor="default";
    event.srcElement.style.color="white";
    event.srcElement.style.background="darkblue";
    }
    function myout()
    {
    event.srcElement.style.color="";
    event.srcElement.style.background="";
    }
    function myclick(j)
    {
    document.all.mysel.selectedIndex=j;
    str="<input type=text style='width:"+mywidth+";border:1 solid #000000;' readOnly title="+document.all.mysel.options[document.all.mysel.selectedIndex].text+" onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";
    likesel.innerHTML=str;
    }
    </script>
    <body onload="showdiv(mysel.offsetWidth)" cellpadding=0 cellspacing=0 onclick='likesel.innerHTML=str'>
    <div id=likesel></div>
    <select name=mysel>
    <option value=11 selected>qqqqwwww
    <option value=12>1234
    <option value=13>88888888888888end
    </select>
      

  3.   

    To:seabell(百合心) 当select里面的option值和显示的不一样的时候就会有问题
    而且这样只能用一个名字 这个js只能对应一个页面 如果想做的比较通用的话
    能否动态的改变。
      

  4.   

    呵呵 不好意思 刚才看错了 不过还是有一个问题
    希望能给解决 就是点击这个模拟的select会把网页下面的元素往下推
    要是有很多的话就很难看 不知道要怎么做