页面中的超完美ComboBox!

PoPoTang(泡泡棠) ：‘不过文字交叉了会影响视觉’，是什么情况呵？

解决方案 »

  1.   

    这个称不上是完美的, 应该说是非常老土的 combo box , 恕我直言!不能绑定数据源.
    在页面上表现的与真正的combo box 相差太远.
    走得还是 textbox + button 这样的老路!!
      

  2.   

    新路应该是 textbox + select 这种组合, select 可以继承原来 dropdownlist 里的所在属性, 比如后台直接绑定数据源等.
      

  3.   

    干脆一个输入框，一个选择框 选择框获取数据源，输入框提交数据。  选择框onchange事件改变输入框。
    就是难看些  至于前台添加选择项 我想应用的场合很少
      

  4.   

    <HTML>
    <HEAD>
    <style>
    .a
    {
    BORDER-RIGHT: lightblue 1px solid;
    BORDER-TOP: lightblue 1px solid;
    LEFT: 280px; 
    BORDER-LEFT: lightblue 1px solid;
    WIDTH: 100px; 
    BORDER-BOTTOM: lightblue 1px solid;
    POSITION:  absolute; 
    TOP:  37px; 
    HEIGHT: 24px;
    }
    .b
    {
    FONT-SIZE: 9px;
    BORDER-LEFT-COLOR:lightblue;
    LEFT: 358px; 
    BORDER-BOTTOM-COLOR: 
    lightblue; 
    WIDTH: 20px; 
    COLOR: mediumblue; 
    BORDER-TOP-STYLE: solid; 
    BORDER-TOP-COLOR: lightblue; 
    BORDER-RIGHT-STYLE: solid; 
    BORDER-LEFT-STYLE: solid; 
    POSITION: absolute; 
    TOP: 39px;
    HEIGHT: 20px; 
    BACKGROUND-COLOR: white; 
    BORDER-RIGHT-COLOR: lightblue;
    BORDER-BOTTOM-STYLE: solid; 
    FILTER: progid:DXImageTransform.Microsoft.Matrix(SizingMethod ='auto expand',FilterType=bilinear,Dx=0,Dy=0,M11=-1,M12=0,M21=0,M22=-1);
    }
    .c
    { LEFT: 280px; 
    WIDTH: 100px; 
    POSITION:  absolute; 
    TOP:  60px; 
    HEIGHT: 24px;
    display:none;
    cursor:pointer;
    }
    </style>
    </HEAD>
    <BODY>
    <INPUT id=select2  class="a">
    <INPUT type=button value="▲" class="b" onclick="ddd(this);" title=""> 
    <TABLE border="1" CELLPADDING=0 CELLSPACING=0 bordercolor="lightblue" class="c"  onclick="aaa(this);">
      <TR>
        <TD bordercolor="#FFFFFF"  onmouseover="bbb(this);"  onmouseout="ccc(this);" title="1">
    <img src="http://expert.csdn.net/expert/images/rank/star1.gif">1星
        </TD>
    </TR>
    <TR>

        <TD bordercolor="#FFFFFF"  onmouseover="bbb(this);"  onmouseout="ccc(this);" title="2">
    <img src="http://expert.csdn.net/expert/images/rank/star2.gif">2星
    </TD>
    </TR>
    <TR>

        <TD bordercolor="#FFFFFF" onmouseover="bbb(this);"  onmouseout="ccc(this);" title="3">
    <img src="http://expert.csdn.net/expert/images/rank/star3.gif">3星
        </TD>
    </TR>
    </TABLE><SCRIPT >
      function aaa(obj)
    {
    previousSibling(previousSibling(obj)).value= window.event.srcElement.innerText;
    previousSibling(previousSibling(obj)).title= window.event.srcElement.title;
    eee(obj);
    }
    function bbb(obj)
    { 
    obj.borderColor="#FF0000";
    }
    function ccc(obj)
    {
    obj.borderColor="#ffffff";
    }
    function ddd(obj)
    {
    nextSibling(obj).style.display="block";
    }
    function eee(obj)
    {
    obj.style.display="none";
    }
    function nextSibling(obj)
    {
    for(i=1;i<obj.document.all.length;i++)
    {
    if(obj==obj.document.all(i))
    {
    return(obj.document.all(i+1))
    }
    }
    }
    function previousSibling(obj)
    {
    for(i=1;i<obj.document.all.length;i++)
    {
    if(obj==obj.document.all(i))
    {
    return(obj.document.all(i-1))
    }
    }
    }
    </SCRIPT>
    </BODY></HTML>
      

  5.   

    我已经做好了这种模式的combo box, 等我整理好之后我就发布出来.