文本和下拉结合的可填可选输入框

文本和下拉结合的可填可选输入框

前段时间客户要求输入框既可以像文本框那样输入，又可以下拉选择 。本以为会非常的复杂，后来做起来却发现并不难，只是有些巧妙的地方要注意。可填可选的输入框是由一个input text控件和select控件经过剪切叠加组合而成.

html代码：
<tr> 
 <td align="right"  width="33%">&nbsp;</td>
 <td align="center"  width="33%"><strong>工作日时限：</strong></td>
 <td align="left"  width="33%">
 <input type="text" name="dayLimit" style="width:45px;POSITION: absolute">
 <select  id="choose" οnchange="document.all['dayLimit'].value=this.options[this.selectedIndex].value" style="width:62px;CLIP: rect(auto auto auto 45px); POSITION: absolute">
  <option value=""></option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
 </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天</Td>
</tr>

关键：
1。由select的onchange替代input text的value值。
2。rect ( number number number number )元素：
   依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切；必须将 position 属性的值设为 absolute ，此属性方可使用。
3。要做这个控件，只需对rect(number number number number )最后一个number设置一个值，其余都为auto。
   向下的箭头部分的长度大约17px，所以就有这样一个规律：
   select控件的长度＝input text控件的长度+17px
   也就是说，如果我希望在页面上呈现一个217px的可填可写的select控件，就可以设置如下：
   input text : 45px
   select控件    : 62px
   rect设置      ：rect(auto auto auto 45px )

javascipt取值,实质是取input text的值：
var dayLimit = document.all["dayLimit"].value;
alert("dayLimit="+dayLimit);
原来就是这么简单的！