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>
  • 相关阅读:
    eclipse部署web项目至本地的tomcat但在webapps中找不到
    tomcat使用jdbc连接mysql出现的错误
    MySQL-5.6.13解压版(zip版)安装配置教程
    mysql简单用法
    关于java代理(静态代理和动态代理)
    shell 基础
    一、Django入门
    java 强制类项转换
    Java多态性详解——父类引用子类对象
    Java中抽象类和接口的区别
  • 原文地址:https://www.cnblogs.com/mianbaoshu/p/7442798.html
Copyright © 2011-2022 走看看