jquery.editable-select 可编辑下拉框之获取select值和input值

使用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>
原文地址:https://www.cnblogs.com/mianbaoshu/p/7442798.html