可输入的下拉框

    可输入的下拉框其实是由两个标签组成，一个是 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标签及样式都可以去掉！