zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    HDU 4686
    二叉索引树——树状数组
    poj 3548 Restoring the digits(DFS)
    poj 2062 Card Game Cheater(排序+模拟)
    poj 2570 Fiber Network(floyd)
    hdu 1080 Human Gene Functions
    hdu 4512 吉哥系列故事——完美队形I(最长公共上升自序加强版)
    2015 Multi-University Training Contest 2
    poj 1258 Agri-Net(最小生成树)
    2015 Multi-University Training Contest 1记录
  • 原文地址:https://www.cnblogs.com/mianbaoshu/p/7442798.html
Copyright © 2011-2022 走看看