高分求combobox的实用设计！老大们帮帮，网上竟然没有实用的喔！

确实我没有把 combo box 加到我的网站上去, 这段时间我只顾忙我自己的JSAM框架去了, 而原来我写的 combo box 我正想把它们移植到JSAM框架上去, 所以我就没有公开了.

解决方案 »

  1.   

    if(this.divIndex > -1)
        {
          var bodyClientHeight  = this.Layer.layer.document.body.clientHeight;
          var bodyScrollTop     = this.Layer.layer.document.body.scrollTop;
          var itemTop           = getAbsTop(a[this.divIndex]) + 16;
          if (itemTop < bodyClientHeight) this.Layer.layer.document.body.scrollTop = 0;
          if (itemTop > bodyClientHeight)
            this.Layer.layer.document.body.scrollTop = itemTop - bodyClientHeight;
        }
      }
      this.input.onkeydown = function()
      {
        var CB = eval(WCBN).items[WCBI];
        switch(window.event.keyCode)   //非IE浏览器, 这里可能会出现小问题
        {
          case 40 : CB.arrow(40); break;
          case 38 : CB.arrow(38); break;
          case 13 : CB.arrow(13); break;
          default : setTimeout(WCBN +".items["+ WCBI +"].match()"); break;
        }
      }
      this.click    = function(n)
      {
        this.text   = this.input.value =this.WCBItems[n].text;
        this.index  = this.source.selectedIndex = this.WCBItems[n].index;
        this.value  = this.WCBItems[n].value; this.hide();
      }
      this.input.onblur = function()
      {
        var CB = eval(WCBN).items[WCBI], A = CB.source.options;
        if(!CB.mouse){ CB.hide(); CB.hideArrow();}
        for(var i=0; i<A.length; i++) if(A[i].text==this.text) return;
        if (CB.canAddOption)
        {
          CB.text = CB.value = CB.userInput;
          A.add(new Option(CB.text, CB.value, true, true));
          CB.source.selectedIndex = CB.index = A.length -1;
        }
        else
        {
          if (CB.reserveLastInput)
          {
            CB.text = CB.value = CB.userInput;
            if(A.length == CB.sourceOpLen) A.add(new Option(CB.text, CB.value, true, true));
            else { A[CB.sourceOpLen].text = CB.text; A[CB.sourceOpLen].value = CB.value; }
            CB.source.selectedIndex = CB.index  = CB.sourceOpLen; return;
          }
          CB.index = CB.source.selectedIndex;
          CB.value = A[CB.index].value;
          CB.text  = CB.input.value = A[CB.index].text;
        }
      }
    }
    function WebConboBoxDataItem(WCBN, WCBI)
    {
      this.value = this.text = ""; this.index = -1;
      this.toString = function(n, color, bgColor, fontSize, fontFamily)
      {
        return("<div style='color: "+ color +"; background-color: "+ bgColor
          +"; font-size: "+ fontSize +"; font-family: "+ fontFamily +"' "
          +"onclick    ='parent."+ WCBN +".items["+ WCBI +"].click("+ n +")' "
          +"onmouseover='parent."+ WCBN +".items["+ WCBI +"].mouseover(this)' "
          +"onmouseout ='parent."+ WCBN +".items["+ WCBI +"].mouseout(this)' "
          +"nowrap>"+ this.text +"</div>");
      }
    }
    function WebLayer(layerName)
    {
      if(typeof(layerName) != "string") return("The layerName is wrong！");
      this.layer  = this.iframe = null;
      this.IE     = window.navigator.appName == "Microsoft Internet Explorer";
      var  Ver    = window.navigator.appVersion;
      this.popup  = this.IE && parseFloat(Ver.substr(Ver.indexOf("MSIE")+5))>=5.5;  if (this.popup)
      {
        this.layer= window.createPopup();
        with(this.layer.document.body.style)
        {
          border    = "1px solid #000000";
          overflow  = "auto";
          overflowX = "hidden";
          margin    = "4 0 4 0";
        }
      }
      else
      {
        document.write("<iframe name='WebLayer_"+ layerName +"' id='WebLayer_"+ layerName +"' scrolling=yes"
          +" frameborder=0 border=0 style='position: absolute; display: none; z-index: 10;'></iframe>");
        this.iframe = getElementById("WebLayer_"+ layerName);
        this.layer  = window.frames["WebLayer_"+ layerName];
        this.layer.document.write("<html><head>"
          +" <meta http-equiv='Content-Type' content='text/html; charset=gb2312'></head><body "
          +" style='border: 1px solid #000000; overflow:auto; overflow-x:hidden; margin: 4 0 4 0' "
          +" onselectstart='return false' oncontextmenu='return false'></body></html>");
        this.layer.document.close();
      }
      this.style  = this.layer.document.body.style;
      this.hide   = function()
      {
        if (this.popup){this.layer.hide();}
        else this.iframe.style.display = "none";
      }
      this.write  = function(str)
      {
        if(this.popup) this.layer.document.body.innerHTML =
          "<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>"+ str;
        else this.layer.document.body.innerHTML = str;
      }
      this.show   = function(e, width, height)
      {
        if(typeof(e)!="object") return("Layer need a head object！");
        if( !(width && height)) return("Width or Height is wrong！");
        var oh = e.offsetHeight;
        var t  = getAbsTop(e) + oh;
        var l  = getAbsLeft(e);
        var dt = document.body.scrollTop;
        var dl = document.body.scrollLeft;
        var w  = width;
        var h  = height;
        if(this.popup)
        {
          var wt = window.screenTop;
          var wl = window.screenLeft;
          var sw = window.screen.width;
          var sh = window.screen.height;
          this.layer.show(0, 0, 0, 0);
          var ldbs= this.layer.document.body.scrollHeight + 2;
          var h = ldbs > h ? h : ldbs;
          var left = (sw-l-wl+dl > w) ? l-dl+wl+2 : sw-w;
          var top  = (sh-t-wt+dt > h) ? t-dt+wt+2 : (t-dt-oh+wt < h) ? t-dt+wt+2 : t-h-dt-oh+wt;
          this.layer.show(left, top, w, h);
        }
        else
        {
          var dw  = document.body.clientWidth;
          var dh  = document.body.clientHeight;
          var ldbs= this.layer.document.body.scrollHeight + 2;
          with(this.iframe.style)
          {
            display = "";
            width   = w;
            height  = ldbs > h ? h : ldbs;
            top     = (dh+dt-t > h) ? t : (t-dt-oh<h) ? t : t-dt-oh;
            left    = (dw+dl-l > w) ? l : dw+dl-w;
          }
        }
      }
    }
    function getAbsLeft(e){var l=e.offsetLeft; while(e=e.offsetParent) l += e.offsetLeft; return l;}
    function getAbsTop(e){ var t=e.offsetTop;  while(e=e.offsetParent) t += e.offsetTop;  return t;}
    function getElementById(id)
    {
      if (arguments.length == 0) return null;
      /*@cc_on @*/ /*@if (@_jscript_version>=3) return document.all(id); @end @*/
      try {return document.getElementById(id);} catch(e){ return eval(id);}
    }
    var WCB = new WebConboBox("WCB"); //所有的 Combo Box 公用一个数据展示层
    // -->
      

  2.   

    <SCRIPT LANGUAGE="JavaScript" src="WebComboBox.js"></SCRIPT>
    <style>input{font-size: 9pt}</style>
    <form name="mm" method="post">
    <select name="ddMoneyType" id="ddMoneyType" class="select">
    <option selected="selected" value="">所有类型</option>
    <option value="0">0人民币</option>
    <option value="1">1美  元</option>
    <option value="2">2港  币</option>
    </select><br>
    <select name="ddMoneyType2" id="ddMoneyType" class="select">
    <option selected="selected" value="">所有类型</option>
    <option value="0">0人民币</option>
    <option value="1">1美  元</option>
    <option value="2">2港  币</option>
    </select><SCRIPT LANGUAGE="JavaScript"><!--var A = document.forms["mm"].elements
    for (var i=0; i<A.length; i++)
    {
      if(A[i].tagName == "SELECT")
      {
        var a = WCB.add(A[i], true);
      }
    }
    //--></SCRIPT>
      

  3.   

    谢谢meizz(梅花雪) 老大的雪中送炭，我对JK_10000(JK)老大的设计特别感兴趣，只是不是我要得！
    本来想改进使用的，并发了邮件得到JK_10000(JK)的指点，后来投降了！我查了两周的资料，后来还是不行－－水平是主要的因素！
    星爷说过：高手不是这样练的！^_^我先仔细看看！再次感谢并感动中……
      

  4.   

    可以看看 方成eform自定义表单平台 中的fccode控件.
      

  5.   

    经典的控件，梅大哥（meizz）的倾力贡献，不看吃亏喔！
      

  6.   

    揭帖，并对梅老大表示感谢！对jk老大表示感谢！我在使用的时候结果如下：
    好处就不说了，谈谈还需要的改进，纯使用角度，js小弟懂的不多！
    1、会出现稍微的错位，非大碍！
    2、选项匹配多的时候不会有滚动条！
    3、在onchange事件的时候，仅开始的时候可以事件触发！在填写出现下拉的时候，无法触发！揭帖散分！