你可以用一个textbox和一个图片来模拟!

解决方案 »

  1.   

    to flyycyu(fly) :那下拉的内容怎么出来?
      

  2.   

    用一个text和一个select组合实现,控制text的样式为一条线,然后让select的打下为只显示箭头,如下:
    <html>
    <head>
    <title>ListBox</title>
    <style type="text/css">
    <!--
    .t {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-bottom-color: #000000;
    }
    -->
    </style>
    </head>
    <body>
    <select name="select"style="position:absolute; left: 10px; top: 10px; width: 120px; height: 18px; clip: rect(0 120 18 100)" id="select" onchange="textfield.value=select.value;textfield.select()">
        <option value="aaaaaaaa">aaaaaaaa</option>
        <option value="bbbbbbbb">bbbbbbbb</option>
        <option value="cccccccc">cccccccc</option>
    </select>
    <input name="textfield" type="text" class="t" style="position:absolute; left: 10px; top: 10px; width: 100px; height: 20px">
    </body>
    </html>
      

  3.   

    或者你用clip把select的右面剪裁掉!
    再用图片补上!
      

  4.   

    谢谢 beyond_xiruo(希偌) ,美中不足的是:三角箭头可否去掉它的背景矩形(突起来,很难看),只留一个三脚▲?
      

  5.   

    给你一个,把down_arrow.gif图片换成箭头的就可以了<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <style>
    .selectOff
    {
        BORDER-RIGHT: medium none;
        BORDER-TOP: medium none;
        FONT-SIZE: 12px;
        OVERFLOW: hidden;
        BORDER-LEFT: medium none;
        CURSOR: default;
        BORDER-BOTTOM: #aaaaaa 1px solid;
        BACKGROUND-COLOR: transparent
    }
    .selectOn
    {
        BORDER-RIGHT: 1px solid;
        BORDER-TOP: 1px solid;
        FONT-SIZE: 12px;
        Z-INDEX: 1;
        LEFT: -1000px;
        VISIBILITY: hidden;
        OVERFLOW: hidden;
        BORDER-LEFT: 1px solid;
        WIDTH: 0px;
        CURSOR: default;
        BORDER-BOTTOM: 1px solid;
        FONT-FAMILY: ??¨??,Helvetica,Arial,Sans-Serif;
        POSITION: absolute;
        TOP: -1000px;
        BACKGROUND-COLOR: #f0f0f0
    }
    .ednonedisable
    {
        BORDER-RIGHT: medium none;
        BORDER-TOP: medium none;
        FONT-SIZE: 12px;
        BORDER-LEFT: medium none;
        COLOR: #777777;
        BORDER-BOTTOM: medium none;
        BACKGROUND-COLOR: transparent
    }
    .selectItem
    {
        FONT-SIZE: 12px;
        WIDTH: 100%;
        LINE-HEIGHT: 16px
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    selectObjs = false;
    curSelectObj = null;
    window.onresize=TryAdjustSelect;
    setTimeout("SetOnFocusToHideSelect();",500);
    function SetOnFocusToHideSelect()
    {
    var obj;
    var i;
    if (document.all){
    document.body.onfocus = TryHideSelect;
    obj = document.all.tags("TABLE");
    for (i=0;i<obj.length;i++){
    obj.item(i).onfocus = TryHideSelect;
    }
    obj = document.all.tags("TD");
    for (i=0;i<obj.length;i++){
    obj.item(i).onfocus = TryHideSelect;
    }
    obj = document.all.tags("A");
    for (i=0;i<obj.length;i++){
    obj.item(i).onfocus = TryHideSelect;
    }
    }
    }function RegisterSelect(selobj)
    {
    if (!selectObjs)
    selectObjs = new Array();
    selectObjs[selectObjs.length] = selobj;
    }function TryAdjustSelect()
    {
    if (selectObjs){
    for (i=0;i<selectObjs.length;i++)
    if (selectObjs[i].visible){
    CalcSelectPosition(selectObjs[i]);
    }
    }
    }function TSelectObject(formVarH,formVarV,idOn,idOff,selectedIndex,nItems,onselectFunc)
    {
    this.formVarH = formVarH;
    this.formVarV = formVarV;
    this.idOn = idOn;
    this.idOff = idOff;
    this.selectedIndex = selectedIndex;
    this.index0 = selectedIndex;
    this.visible = false;
    this.nItems = nItems;
    this.onselect = onselectFunc;
    return this;
    }function ToggleSelect(selobj)
    {
    if (selobj.visible)
    HideSelect(selobj);
    else
    ShowSelect(selobj);
    return;
    }function HighlightOption(selobj,i)
    {
    NormalOption(selobj,selobj.selectedIndex);
    var obj = document.all[selobj.idOn+"_"+i];
    obj.style.backgroundColor = "#113399";
    obj.style.color = "#ffffff";
    }function NormalOption(selobj,i)
    {
    var obj = document.all[selobj.idOn+"_"+i];
    obj.style.backgroundColor = "#f0f0f0";
    obj.style.color = "#000";
    }function OptionClicked(selobj,idx,val)
    {
    var obj = document.all[selobj.idOn+"_"+idx];
    var vstr = obj.innerText;
    vstr = vstr.replace(/^( )+/,"");
    var formObj=null; formObj = FindFormByVarName(selobj.formVarH);
    if (formObj!=null){
    eval("formObj."+selobj.formVarV+".value = vstr;");
    eval("formObj."+selobj.formVarH+".value = "+val+";");
    }
    selobj.selectedIndex = idx;
    HideSelect(selobj);
    if (selobj.onselect!=''){
    eval(selobj.onselect+"("+val+");");
    }
    }function CalcSelectPosition(selobj)
    {
    if (document.all){
    var obj = document.all[selobj.idOff];
    var left = 0;
    var top = 0;
    for (; obj!=document.body; obj=obj.offsetParent){
    left += obj.offsetLeft;
    top  += obj.offsetTop;
    }
    obj = document.all[selobj.idOn].style;
    obj.pixelLeft = left;
    obj.pixelTop = top+document.all[selobj.idOff].offsetHeight+1;
    obj.pixelWidth = document.all[selobj.idOff].offsetWidth;
    if (selobj.nItems<=10){
    obj.pixelHeight = selobj.nItems*16+2;
    obj.overflow = "visible";
    }
    else{
    obj.pixelHeight = 10*16+2;
    obj.overflow = "auto";
    }
    }
    }function PreShowSelect(selobj)
    {
    obj = document.all[selobj.idOn].style;
    obj.overflow = "hidden";
    }function ShowSelect(selobj)
    {
    if (document.all){
    if (curSelectObj!=null)
    HideSelect(curSelectObj);
    selobj.visible = true;
    document.all[selobj.idOn].style.visibility="visible";
    CalcSelectPosition(selobj);
    // document.all[selobj.idOn].focus();
    // document.all[selobj.idOn+"_"+selobj.selectedIndex].scrollIntoView();
    HighlightOption(selobj,selobj.selectedIndex);
    curSelectObj = selobj;
    }
    }function HideSelect(selobj)
    {
    if (document.all){
    obj = document.all[selobj.idOn].style;
    obj.visibility="hidden";
    selobj.visible = false;
    curSelectObj = null;
    }
    }function DelayHideSelect(objname)
    {
    setTimeout("HideSelect("+objname+");",200);
    }function TryHideSelect()
    {
    if (curSelectObj!=null)
    HideSelect(curSelectObj);
    }function EscapeHTMLString(str)
    {
    str  = str+"";
    str = str.replace(/&nbsp;/g," ");
    str = str.replace(/&/g,"&amp;");
    str = str.replace(/</g,"&lt;");
    str = str.replace(/>/g,"&gt;");
    str = str.replace(/"/g,"&quot;");
    str = str.replace(/ /g,"&nbsp;");
    return str;
    }function GenSelItem(num,k,v)
    {
    var sobj = "selobj_"+tmp_select_vname;
    var id = "selon_"+tmp_select_vname;
    v = EscapeHTMLString(v);
      document.write("<DIV CLASS=\"selectItem\" ID=\""+id+"_"+num+"\" ONCLICK=\"OptionClicked("+sobj+","+num+",'"+k+"');\" ONMOUSEOVER=\"HighlightOption("+sobj+","+num+");\" ONMOUSEOUT=\"NormalOption("+sobj+","+num+");\">"+v+"</DIV>");
    }function FindFormByVarName(vname)
    {
    for (i=0;i<document.forms.length;i++){
    if (document.forms[i].all[vname]!=null)
    return document.forms[i];
    }
    return null;
    }function FindVarByName(vname)
    {
    var obj;
    for (i=0;i<document.forms.length;i++){
    obj = document.forms[i].all.item(vname);
    if (obj!=null){
    if (obj.length>0)
    return obj.item(0);
    else
    return obj;
    }
    }
    return null;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <FORM METHOD=POST name=thisForm ACTION="">
    <TABLE width=100>
    <TR>
    <TD><div ID="seloff_emp_cal_start_month" CLASS="selectOff" ONCLICK="ToggleSelect(selobj_emp_cal_start_month);">
    <table BORDER="0" CELLSPACING="0" CELLPADDING="0">
      <tr>
    <td><input CLASS="ednonedisable" READONLY STYLE="cursor:default;" NAME="selvarV_emp_cal_start_month" VALUE="1" SIZE="20"></td>
    <td WIDTH="1%"><img src="../image/images/down_arrow.gif" STYLE="cusor:hand;" BORDER="0" width="15" height="6"></td>
      </tr>
    </table>
      </div>
      <div ID="selon_emp_cal_start_month" CLASS="selectOn" ONBLUR="DelayHideSelect('selobj_emp_cal_start_month');">
    <script LANGUAGE="javascript">tmp_select_vname='emp_cal_start_month';GenSelItem(0,0,' ');GenSelItem(1,1,'1');GenSelItem(2,2,'2');GenSelItem(3,3,'3');GenSelItem(4,4,'4');GenSelItem(5,5,'5');GenSelItem(6,6,'6');GenSelItem(7,7,'7');GenSelItem(8,8,'8');GenSelItem(9,9,'9');GenSelItem(10,10,'10');GenSelItem(11,11,'11');GenSelItem(12,12,'12');</script>
      </div>
      <input TYPE="HIDDEN" NAME="emp_cal_start_month" VALUE="1">
      <script>
      selobj_emp_cal_start_month=new TSelectObject('emp_cal_start_month','selvarV_emp_cal_start_month','selon_emp_cal_start_month','seloff_emp_cal_start_month',2,13,'');
    RegisterSelect(selobj_emp_cal_start_month);
    </script></TD>
    </TR>
    </TABLE></FORM>
    </BODY>
    </HTML>
      

  6.   

    to flyycyu(fly) :谢谢你!你说的就是剪掉小箭头吗?可具体怎么写,你可以给一些代码参考么?我是行外人。
      

  7.   

    刷新真快!谢谢gzh_seagull(不可) ,好长的代码,全都需要吗?我试试看。
      

  8.   

    http://lucky.myrice.com/temp/combobox.htm修改即可
      

  9.   

    <!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 style="width:100px;height:20px">
     <option>1
    </select><select style="position:absolute;width:100px;height:20px;clip:rect(0 80 20 0)">
     <option>2
    </select></BODY>
    </HTML>
      

  10.   

    to flyycyu(fly) :把你的代码和beyond_xiruo(希偌) 的代码结合起来,整个select被剪掉了,这样下拉内容就出不来了。to gzh_seagull(不可) :代码有错,可是太长,不知道怎么改,你的这段代码很经典的,我看过,有一家公司的程序页面用的就是这个,但是有错,“借”不过来。
      

  11.   

    to : yundanfengqing(云淡风轻) 
    什么错误提示
      

  12.   

    触发下拉内容的出现是在div中,div把textbox和img都报含了,所以不管点textbox还是img都可以触发。
      

  13.   

    to  gzh_seagull(不可) :错误为TSelectObject未定义。将你的代码存成一个.htm文件,打开就出错了。谢谢!
      

  14.   

    我是在测试文件中完全考下来的,不会有错,你看看是不是有一些多余的空格,看看定义和调用TSelectObject的代码附近的代码
      

  15.   

    拜托!用不着他那么麻烦!
    你只要剪掉部分!剪掉的
    部分你用一个图片替代!
    点击该图片的时候触发select的
    click事件!
      

  16.   

    <style>
    .arrow {
    font-family: Webdings;
    font: 9pt;
    color: blue;
    text-align: center;
    cursor: hand;
      background:  white;
    }
    .seltxt{
    border-left:0;
    border-right:0;
    border-top:0;
    border-bottom:1 solid #000000;
    }
    </style>
    <script>
    str="";
    mywidth=0;
    function showdiv(w)
    {
    document.all.mysel.style.display="none";
    str="<input type=text class=seltxt style='width:"+w+";' readOnly onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";
    liststr="<table style='border:1 solid #000000;' width="+w+" cellspacing=0 cellpadding=0>";
    for(i=0;i<document.all.mysel.options.length;i++)
    liststr+="<tr><td style='font-size:10pt' onmouseover=myover() onmouseout=myout() onclick=myclick("+i+")>"+document.all.mysel.options[i].text+"&nbsp;&nbsp;&nbsp;</td></tr>";
    liststr+="</table>";
    likesel.innerHTML=str;
    mywidth=w;
    }
    function showlist()
    {
    if(likesel.innerHTML.indexOf("TABLE")==-1)
    likesel.innerHTML+=liststr;
    }
    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 class=seltxt style='width:"+mywidth+";' readOnly onclick=showlist() value="+document.all.mysel.options[document.all.mysel.selectedIndex].text+">";
    likesel.innerHTML=str;
    document.all.arrow.disabled=false;
    }
    </script>
    <body onload="showdiv(mysel.offsetWidth)">
    <select name=mysel>
    <option value=11 selected>1111111
    <option value=12>111112
    <option value=13>1111111113
    </select>
    <table border=0><tr><td><span id=likesel></span></td><td valign=top><span id=arrow class=arrow onclick=showlist()>6</span></td></tr></table>
      

  17.   

    大家试试 seabell(百合心) 的代码。真棒!2002年岁末,在各位的热心帮助下,问题圆满结束。现结贴给分,祝大家元旦快乐,来年技术更上一层楼!