在表格中的选择框如何使得用户不仅可以自己选择，还可以自己输入？
话不多说。直接上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也没问题。到此解决