您的位置:首页 > Web前端 > JavaScript

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

2013-11-05 13:42 330 查看
<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>

注意注释的位置。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息