可选择和输入的下拉列表框示例

复制代码 代码如下:

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>可选择和输入的下拉列表框</title>

  <style type="text/css">

  div,span,p,td,font{font-size:9pt;}

  </style>

  </head>

  <body>

  <table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td align="left">

  <!--select标签和input外面的span标签的格式是为了使两个位置在同一位置,控制位置-->

  <span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);">

  <select name="aabb" id="aabb" style="width:190px;height:20px;margin:-2px;"

  onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">

  <!--下面的option的样式是为了使字体为灰色,只是视觉问题,看起来像是注释一样-->

  <option value="" style="color:#c2c2c2;">---请选择---</option>

  <option value="闲人书库">闲人书库</option>

  <option value="闲人BLOG">闲人BLOG</option>

  <option value="闲人设计">闲人设计</option>

  <option value="闲人软件">闲人软件</option>

  </select>

  </span>

  <span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">

  <input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="width:170px;height:15px;border:0pt;">

  </span>

  </td></tr></table>

  </body>

  </html>

  注意注释的位置。