在表格中的選擇框如何使得用戶不僅可以自己選擇，還可以自己輸入？
話不多說。直接上html
<body>
<table class="table table-bordered">
<tr>
<td>#</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
</td>
</tr>
</table>
</body>
對應的瀏覽器中顯示
那么問題來了，加入我們不僅要選擇。當選擇框沒有我們想要的數據的時候，我們想自己輸入怎么辦呢？
這里我想到的方案是給選擇框單元格增加一個input標簽，然后讓input標簽蓋住選擇框數據
<table class="table table-bordered" >
<tr>
<td>#</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<input class="input1">
</td>
</tr>
</table>
這樣的效果會讓input標簽顯示在選擇框的后面，同時拉大了單元格的寬度，所以應當給input標簽添加relative屬性，代碼如下
<style>
.table-bordered{
width: 600px;
}
.input1{
position: relative;
width: 30px;
margin-left: -50px;
}
</style>
通過設置input標簽的寬度以及margin-left。使得input標簽能蓋住選擇框的文本顯示區域，只讓選擇框的下拉按鈕出現，
然后要想辦法實現選擇框的值能夠出現在input標簽中
這很簡單，我們通過jquery就可以搞定，
首先，我們給選擇框的onchange 定義個函數change；
function change() {
var selected = $('select').val();
$('.input1').val(selected);
}
就是這么簡單，當我們每次改變選擇框的值，對應的input標簽就能顯示出對應的值。但當我們剛打開頁面的時候，input標簽是沒用值的，所以我們可以給input添加個默認值
然而。問題就這么解決了嗎？當然沒有；不信你用瀏覽器打印預覽試試
看吧，我們僅僅只是蓋住選擇框。但打印的時候還是會重疊，而且，給添加z-index屬性也沒用。
這里我想出另一種方法；假如當每次改變值的時候讓選擇框選擇的index（索引）為-1；是不是就可以解決呢？
function change() {
var selected = $('select').val();
$('.input1').val(selected);
$('select').val(-1);
}
貌似真的可以
打印預覽就只有20，不會重疊，但問題來了。chrome瀏覽器完全沒問題，但firefox的重疊問題卻還是存在
看來火狐對選擇框的值改為-1沒反應。於是我打印選擇框的值
var options = $('select option:selected');
console.log(options);
打印出來 的options是個對象 如圖
通過對options對象的分析發現對options 的更改index索引值還是沒效果；於是只能想另一種方案； 那就是通過打印的時候讓選擇框display:none
代碼：
@media print {
select{
display: none;
}
}
最后在火狐上打印效果
這下火狐也正常打印了，經測試。IE也沒問題。到此解決