可输入的下拉框

可输入的下拉框其实是由两个标签组成，一个是 select 下拉列表标签，一个是 input 文本输入标签。



思路是在 select 标签选取到的值通过javaScript代码放入到 input 标签，而最后取值只取 input 标签中的值。在样式上就要把input标签压在select标签上，从外观看就是一个标签。



实现的代码如下：

1、jsp页面代码（已含JS代码）：

<div class="searchBar">
<select onchange="document.getElementById('findDataCondition').value=this.options[this.selectedIndex].text;">

<option>"电脑报"</option>
<option>"新潮电子"</option>
<option>"电脑爱好者"</option>
</select>
<iframe class="searchIframe"></iframe>
<input class="floatInput" type="text" maxlength="50" id="findDataCondition" value="<s:property value='findDataCondition'/>" />
</div>





2、CSS样式：

/* 工作列表下拉及输入框样式 */
.searchBar {
float:left;
margin-top:6px;
margin-left:12px;
position: relative;
width:185px;
height:25px;
}
.searchBar select{
position: absolute;
z-index: 10;
left:30px ;
top:0;
width:148px;
height:21px;
}
.searchBar .floatInput{
position: absolute;
z-index: 100;
left:30px ;
top:0;
width:130px;
height:21px;
vertical-align:middle;
line-height:21px;
}



这样就可以实现了，其中<iframe class="searchIframe"></iframe>这个标签完全是为了兼容IE6而加上的，因为IE6把下拉框作为窗体控件，把z-index设到多大都，input 标签都没办法遮盖 select 标签，只有iframe标签可以遮盖 select标签。如果不考虑IE6， 则iframe标签及样式都可以去掉！