可输入的下拉框其实是由两个标签组成,一个是 select 下拉列表标签,一个是 input 文本输入标签。
思路是在 select 标签选取到的值通过javaScript代码放入到 input 标签,而最后取值只取 input 标签中的值。在样式上就要把input标签压在select标签上,从外观看就是一个标签。
实现的代码如下:
1、jsp页面代码(已含JS代码):
<div class="searchBar">
<select οnchange="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标签及样式都可以去掉!