Jquery 自定义实现可编辑的下拉框input和select

实际开发中用户提到能不能将select实现可编辑的情况，当时考虑到将input和select同时使用。

<td width="60" style="padding-left:0;padding-right:0">
   <a href="javascript:void(0);" id="selClick">测试</a>
</td>
<td style="padding-left:0">
   <input id="addr" style="display:none;" name="addr" ondblclick="inpClick();" placeholder="请输入: " type="text">
   <select name="address" style="display: block;" id="address" οnchange="inpputAd();">
       <option value="">请选择..</option>
       <option value="篮球">篮球</option>
       <option value="足球">足球</option>
       <option value="排球">排球</option>
   </select>
</td>

点击<a>测试标签，可触发
$("#selClick").click(function(){
    //显示Input
    $("#fileSecretTime")[0].style="display:block";
    //隐藏select
    $("#address")[0].style="display:none";
    $("#address option:selected").empty();
});

鼠标双击select框，可触发
function inpClick(){
    $("#addr")[0].style="display:none";
    $("#address")[0].style="display:block";
    $("#addr").val('');
}

//把输入框和选择框关联起来
function inpputAd() {
    $("#addr").val($("#address option:selected").text());
}