WEB网页上没有combo 我用CSS加JS代码实现了一个

原理是这样的

1.使用CSS来控制显示样示
2.使用JAVASCRIPT来控制选择框

我把COMBO想像成三部分
1. 一个外框和一个下拉的按钮。
2. 一个文本框，用来接受输入
3. 一个选择框，用来给鼠标选择，选择框平时是隐藏的，且一个网页中的COMBO，只有一个选择框。

我做如下的假设：
1. 网页中可以有N个combo或者select
2. 每一个combo是一个DIV 里面有一个文本框。
3. 每一个select是一个DIV里面有一个只读的文本框。
4. 文本框是不显示边框的。DIV显示边框做为combo或select的边框。
5. 整个网页中有一个隐藏的list 用于combo 和 select的选择。
   当一个combo或select被激活时，list的选项就被重设，然后显示在 combo或select 的下面
6. 当用户单击网页时，只要不是点击combo(select)或list 我们就要把list给隐藏起来。
7. 每一个combo(select) 都有一个对象与之对应,用来保存它的数据。

显示效果：

实现：
DIV的显示由下面的CSS来控制
.comdiv
{
border:1px solid #09206A;
width:160px;
height:22px;
background-image: url(down_arrow.gif);
background-position:right;
background-repeat:no-repeat;
}
文本框是放在DIV里面的所以长度短一些
.comtext
{
 border:0;
 width:138px;
 height:20px;
}
实现一个Combo类(关于javascript面向对象编程,我现在理解还不深,以后研究后再发文说明)
/* Combo类实现 */
function Combo(strid, iscombo)
{
 
  this.id = strid;
  this.combo = iscombo;
  this.textwidth = 138;
  this.length = 0;
  this.value = "";
  this.onchange = null;
  this.options = new Array();
  var obj = document.getElementById(this.id);
  var tt = obj;
  this.top = tt.offsetTop;
  this.left = tt.offsetLeft;
  this.height = tt.clientHeight;
  this.width = tt.clientWidth;
  while ( tt = tt.offsetParent)
  {
     this.top += tt.offsetTop;
     this.left += tt.offsetLeft;
  }
 
  if( this.combo )
   obj.innerHTML="<input type=\"text\" class=\"comtext\" name=\""+this.id+"text\" id=\""+ this.id+"text\" value=\"\"/>";
  else
 obj.innerHTML="<input type=\"text\" class=\"comtext\" name=\""+this.id+"text\" id=\""+ this.id+"text\" value=\"\" readonly=\"true\"/>";
}

this.id 是指与这个combo对象对应的网页中的div的ID
this.combo 是一个布尔值,指出这是一个combo 或者是一个select
this.textwidth 这个是文本框的宽度,脚本在计算点击事件发生的位置时会用到.
this.length  combo中供选择的项的数目
this.value   combo当前的值
this.onchange 这个是一个函数指针,可以设定为一个函数,当this.value改变时就调用这个函数
this.options 这个是一个数组,其中每一项是又是一个数组, 表示一对(TEXT,VALUE)对.
this.top this.left this.height this.width 分别是combo(select)在文档中的位置和大小.(这个可以参见M$的MSDN WEBSDK)
最后程序在DIV中放入一个文本框,它的ID是 this.id + "text"
以下是Combo类的方法

/*设置combo的文本*/
Combo.prototype.setText = function(str)
{
  var obj = document.getElementById(this.id+"text");
  obj.value = str;
}

/* 获取combo的文本 */
Combo.prototype.getText = function()
{
  var str = "";
  var obj = document.getElementById(this.id+"text");
  str = obj.value
  return str;
}

获取combo 值的方法没有,因为我们可以直接从 this.value 得到,这个属性是公开的.

/* 一个响应combo被点击的函数 */
Combo.prototype.on_click = function()
{
  if (( event.x > this.left + this.textwidth + 2) || !this.combo)
   this.select();
}
/*显示选择框供选择 */
Combo.prototype.select = function()
{
   currentcom = this;
   var obj = document.getElementById("combolayer");
   obj.style.top = this.top + this.height + 2;
   obj.style.left = this.left;
   obj.style.width = this.width + 2;
   obj.style.zIndex = 3;
   obj.style.display = "";
   obj.selectedIndex = -1;
   var i ;
   obj.length = this.length;
   for ( i = 0; i < this.length; ++i )
   {
    obj.options[i].text = this.options[i][0];
 obj.options[i].value = this.options[i][1];
   }
}

其中的combolayer就是我们的选择框,我们在合适的位置显示选择框,然后修改它的选项.

/* 这个向Combo里增加一个选项 */
Combo.prototype.addItem = function(strText, strValue)
{
  this.options[this.length] = new Array(strText, strValue);
  ++ this.length;
}

/* 一个combo被点击了 参数是combo 对象*/
function on_comclick(com)
{
 com.on_click(); /*调它自己的处理方法 */
}

/* 关闭选择框 */
function closeLayer()
{
 var obj = document.getElementById("combolayer");
 obj.style.display = "none";
 currentcom = null;
}
/* 点击文档时处理需不需要关闭 选择框 */
function document.onclick()
{
 var str =  window.event.srcElement.id;
 if ( str != "combolayer" && str.indexOf("combox") < 0 )
    {
 closeLayer();
    }
}
/* 选择一个选项 */
function com_onselect(obj)
{
 if ( currentcom )
 {
    currentcom.setText(obj.options[obj.selectedIndex].text);
 currentcom.value = obj.options[obj.selectedIndex].value;
 if ( currentcom.onchange )
  currentcom.onchange(currentcom); /* 调用设置的onchange()函数
  }
 closeLayer();
}

/* 文档载入时调用 */
function initlib()
{
 com1 = new Combo("combox1", false);
 com1.addItem("testText1", "testValue1");
 com1.addItem("testText2", "testValue2");
 com1.addItem("testText3", "testValue3");
 com1.addItem("testText4", "testValue4");
 com1.addItem("testText5", "testValue5");
 com1.addItem("testText6", "testValue6");
 com1.addItem("testText7", "testValue7");
 com1.addItem("testText8", "testValue8");
 com1.addItem("testText9", "testValue9");
 com1.addItem("testText0", "testValue0");
}

最后要修改body ,还要放入一个选择框, 现在先这样,你也可以动态创建一个
<body onload="initlib()">
<select id="combolayer" border="0" size="5" style="position:absolute;z-index:2;display:none;" onchange="com_onselect(this)">
</select>

最后在文档中放入combo
<div id="combox1" class="comdiv" onclick="on_comclick(com1)"></div>
你也可以放入多个
<div id="combox2" class="comdiv" onclick="on_comclick(com2)"></div>
不过要修改 initlib()
初使化一个对象
com2 = new Combo("combox2", true);
当然你需要定义一个全局的变量
var currentcom //当前激活的combo
var com1; //你的combo对象
var com2; //你的combo对象
好,有了以上的代码,在网页中定义一个COMBO要以下几步
1. 定义一个全局的变量,表示你的COMBO
  var comXXXX;
2. 在网页上加上一个DIV
 <div id="comboxXXXX" class="comdiv" onclick="on_comclick(comXXXX)"></div>
3. 在initlib()函数里初使化你的combo
  comXXXX = new Combo("comboxXXXX", false); //SELECT
或comXXXX = new Combo("comboxXXXX", true); //COMBO
例子下载，欢迎修改使用
https://files.cnblogs.com/akang/example_combo.rar