使用jquery.editable-select可以实现可编辑下拉框的功能，但需要先导入jquery.js,jquery.editable-select.css,jquery.editable-select.js这三个文件。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>test</title> 6 <script src="/static/thirdpart/jquery/jquery.js"></script> 7 <script src="/static/thirdpart/jquery/jquery.editable-select.js" ></script> 8 <link rel="stylesheet" type="text/css" href="/static/thirdpart/jquery/css/jquery.editable-select.css"/> 9 </head> 10 11 <body> 12 <div id="editbox" style="display:inline;" > 13 <label >可编辑下拉框</label> 14 <select class="makeEditable" name="employee_id_list" id="employee_id_list" style=" 110px;margin-top:20px;" > 15 <option value="ActionScript">ActionScript</option> 16 <option value="AppleScript">AppleScript</option> 17 <option value="Asp">Asp</option> 18 <option value="BASIC">BASIC</option> 19 <option value="C">C</option> 20 </select> 21 </div> 22 <script type="text/javascript" > 23 $('#employee_id_list').editableSelect( 24 { 25 bg_iframe: false, 26 case_sensitive: false, 27 items_then_scroll: 10 , 28 isFilter:false, 29 onSelect: function(list_item) { 30 var sele_val = $("#editbox #employee_id_list_sele").val(); 31 console.log("selece",sele_val) 32 }, 33 }); 34 </script> 35 36 <script> 37 $(document).ready(function(){ 38 $("#editbox #employee_id_list_sele").keyup(function(){ 39 var sele_val = $("#editbox #employee_id_list_sele").val(); 40 //if (sele_val.length==3) 41 console.log("keyup",sele_val) 42 }); 43 }); 44 </script> 45 46 </body> 47 </html>